joey5628/doodle-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:测试页

Browse Source
This commit is contained in:
joey
2025-07-22 17:16:57 +08:00
parent c5538ce044
commit e0f68a9f71
4 changed files with 471 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/demoPages/shapePrint/index.js
+198
View File
@@ -504,6 +504,18 @@ Page({
case 'drawTrapezoid':
this.drawTrapezoid(ctx, x, y, size, color, '#333', filled);
break;
case 'drawCylinder':
this.drawCylinder(ctx, x, y, size, color, '#333', filled);
break;
case 'drawCube':
this.drawCube(ctx, x, y, size, color, '#333', filled);
break;
case 'drawSphere':
this.drawSphere(ctx, x, y, size, color, '#333', filled);
break;
case 'drawCone':
this.drawCone(ctx, x, y, size, color, '#333', filled);
break;
}
},
@@ -762,6 +774,192 @@ Page({
ctx.restore();
},
// === 3D形状绘制函数 ===
// 绘制圆柱体
drawCylinder(ctx, x, y, size, fillColor, borderColor, filled = true) {
ctx.save();
const radius = size * 0.3;
const height = size * 0.6;
// 绘制主体
if (filled && fillColor !== 'transparent') {
ctx.fillStyle = fillColor;
ctx.fillRect(x - radius, y - height / 2, radius * 2, height);
}
// 绘制主体边框
ctx.strokeStyle = borderColor;
ctx.lineWidth = 3;
ctx.beginPath();
ctx.moveTo(x - radius, y - height / 2);
ctx.lineTo(x - radius, y + height / 2);
ctx.moveTo(x + radius, y - height / 2);
ctx.lineTo(x + radius, y + height / 2);
ctx.stroke();
// 绘制顶部椭圆
ctx.beginPath();
ctx.ellipse(x, y - height / 2, radius, radius * 0.3, 0, 0, Math.PI * 2);
if (filled && fillColor !== 'transparent') {
ctx.fillStyle = fillColor;
ctx.fill();
}
ctx.stroke();
// 绘制底部椭圆
ctx.beginPath();
ctx.ellipse(x, y + height / 2, radius, radius * 0.3, 0, 0, Math.PI * 2);
if (filled && fillColor !== 'transparent') {
ctx.fillStyle = fillColor;
ctx.fill();
}
ctx.stroke();
ctx.restore();
},
// 绘制正方体
drawCube(ctx, x, y, size, fillColor, borderColor, filled = true) {
ctx.save();
const cubeSize = size * 0.4;
const offset = cubeSize * 0.3; // 3D偏移量
// 绘制后面（右侧面）
if (filled && fillColor !== 'transparent') {
ctx.fillStyle = fillColor;
ctx.globalAlpha = 0.6; // 较暗
ctx.fillRect(
x - cubeSize / 2 + offset,
y - cubeSize / 2 - offset,
cubeSize,
cubeSize,
);
ctx.globalAlpha = 1;
}
ctx.strokeStyle = borderColor;
ctx.lineWidth = 2;
ctx.strokeRect(
x - cubeSize / 2 + offset,
y - cubeSize / 2 - offset,
cubeSize,
cubeSize,
);
// 绘制前面（正面）
if (filled && fillColor !== 'transparent') {
ctx.fillStyle = fillColor;
ctx.fillRect(
x - cubeSize / 2,
y - cubeSize / 2,
cubeSize,
cubeSize,
);
}
ctx.strokeRect(x - cubeSize / 2, y - cubeSize / 2, cubeSize, cubeSize);
// 绘制连接线
ctx.beginPath();
// 左上角连接线
ctx.moveTo(x - cubeSize / 2, y - cubeSize / 2);
ctx.lineTo(x - cubeSize / 2 + offset, y - cubeSize / 2 - offset);
// 右上角连接线
ctx.moveTo(x + cubeSize / 2, y - cubeSize / 2);
ctx.lineTo(x + cubeSize / 2 + offset, y - cubeSize / 2 - offset);
// 右下角连接线
ctx.moveTo(x + cubeSize / 2, y + cubeSize / 2);
ctx.lineTo(x + cubeSize / 2 + offset, y + cubeSize / 2 - offset);
ctx.stroke();
ctx.restore();
},
// 绘制球体
drawSphere(ctx, x, y, size, fillColor, borderColor, filled = true) {
ctx.save();
const radius = size * 0.4;
// 绘制主体圆形
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
if (filled && fillColor !== 'transparent') {
// 创建径向渐变模拟3D效果
const gradient = ctx.createRadialGradient(
x - radius * 0.3,
y - radius * 0.3,
0,
x,
y,
radius,
);
gradient.addColorStop(0, '#ffffff');
gradient.addColorStop(0.3, fillColor);
gradient.addColorStop(1, '#000000');
ctx.fillStyle = gradient;
ctx.fill();
}
ctx.strokeStyle = borderColor;
ctx.lineWidth = 3;
ctx.stroke();
// 绘制纬线
ctx.strokeStyle = borderColor;
ctx.lineWidth = 1;
ctx.globalAlpha = 0.5;
// 水平纬线
ctx.beginPath();
ctx.ellipse(x, y, radius, radius * 0.3, 0, 0, Math.PI * 2);
ctx.stroke();
// 垂直经线
ctx.beginPath();
ctx.ellipse(x, y, radius * 0.3, radius, 0, 0, Math.PI * 2);
ctx.stroke();
ctx.restore();
},
// 绘制圆锥体
drawCone(ctx, x, y, size, fillColor, borderColor, filled = true) {
ctx.save();
const radius = size * 0.3;
const height = size * 0.6;
// 绘制圆锥主体
ctx.beginPath();
ctx.moveTo(x, y - height / 2); // 顶点
ctx.lineTo(x - radius, y + height / 2); // 左下
ctx.lineTo(x + radius, y + height / 2); // 右下
ctx.closePath();
if (filled && fillColor !== 'transparent') {
ctx.fillStyle = fillColor;
ctx.fill();
}
ctx.strokeStyle = borderColor;
ctx.lineWidth = 3;
ctx.stroke();
// 绘制底部椭圆
ctx.beginPath();
ctx.ellipse(x, y + height / 2, radius, radius * 0.3, 0, 0, Math.PI * 2);
if (filled && fillColor !== 'transparent') {
ctx.fillStyle = fillColor;
ctx.fill();
}
ctx.stroke();
ctx.restore();
},
// 保存到相册
saveToAlbum() {
if (!this.data.generatedImage) {