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) {
miniprogram/demoPages/shapePrint/index.less
+210 -2
View File
@@ -447,8 +447,6 @@
border-left: none;
border-radius: 50% 50% 0 0;
z-index: 2;
content: '';
display: block;
}
}
@@ -557,6 +555,216 @@
box-sizing: border-box;
}
}
// === 3D 形状样式 ===
/* 圆柱体 */
&.shape-icon-cylinder {
width: 60rpx;
height: 60rpx;
border: none;
background: transparent;
position: relative;
display: flex;
align-items: center;
justify-content: center;
/* 顶部椭圆 */
&::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 50rpx;
height: 16rpx;
background: var(--fill-color, #666);
border: 2rpx solid var(--border-color, #333);
border-radius: 50%;
z-index: 3;
}
/* 主体圆柱 */
&::after {
content: '';
position: absolute;
top: 8rpx;
left: 50%;
transform: translateX(-50%);
width: 50rpx;
height: 44rpx;
background: var(--fill-color, #666);
border-left: 2rpx solid var(--border-color, #333);
border-right: 2rpx solid var(--border-color, #333);
z-index: 1;
}
/* 底部椭圆 */
.cylinder-bottom {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 50rpx;
height: 16rpx;
background: var(--fill-color, #666);
border: 2rpx solid var(--border-color, #333);
border-radius: 50%;
z-index: 2;
}
}
/* 正方体 */
&.shape-icon-cube {
width: 60rpx;
height: 60rpx;
border: none;
background: transparent;
position: relative;
display: flex;
align-items: center;
justify-content: center;
/* 正面 */
&::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 40rpx;
height: 40rpx;
background: var(--fill-color, #666);
border: 2rpx solid var(--border-color, #333);
z-index: 3;
}
/* 顶面 */
&::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 40rpx;
height: 40rpx;
background: var(--fill-color, #666);
border: 2rpx solid var(--border-color, #333);
transform: skewX(-30deg) scaleY(0.6);
transform-origin: bottom left;
z-index: 2;
opacity: 0.8;
}
/* 右面 */
.cube-right {
position: absolute;
bottom: 0;
right: 0;
width: 20rpx;
height: 40rpx;
background: var(--fill-color, #666);
border: 2rpx solid var(--border-color, #333);
border-left: none;
transform: skewY(-30deg);
transform-origin: bottom left;
z-index: 1;
opacity: 0.6;
}
}
/* 球体 */
&.shape-icon-sphere {
width: 50rpx;
height: 50rpx;
border: 2rpx solid var(--border-color, #333);
border-radius: 50%;
background: var(--fill-color, #666);
position: relative;
display: flex;
align-items: center;
justify-content: center;
/* 高光 */
&::before {
content: '';
position: absolute;
top: 12rpx;
left: 16rpx;
width: 12rpx;
height: 8rpx;
background: rgba(255, 255, 255, 0.6);
border-radius: 50%;
}
/* 纬线 */
&::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 46rpx;
height: 20rpx;
border: 1rpx solid var(--border-color, #333);
border-radius: 50%;
opacity: 0.3;
}
}
/* 圆锥体 */
&.shape-icon-cone {
width: 60rpx;
height: 60rpx;
border: none;
background: transparent;
position: relative;
display: flex;
align-items: center;
justify-content: center;
/* 圆锥主体 */
&::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 25rpx solid transparent;
border-right: 25rpx solid transparent;
border-bottom: 45rpx solid var(--fill-color, #666);
z-index: 2;
}
/* 圆锥边框 */
&::after {
content: '';
position: absolute;
top: -1rpx;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 26rpx solid transparent;
border-right: 26rpx solid transparent;
border-bottom: 46rpx solid var(--border-color, #333);
z-index: 1;
}
/* 底部椭圆 */
.cone-bottom {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 50rpx;
height: 16rpx;
background: var(--fill-color, #666);
border: 2rpx solid var(--border-color, #333);
border-radius: 50%;
z-index: 3;
}
}
}
.shape-name {
miniprogram/demoPages/shapePrint/index.wxml
+34 -1
View File
@@ -46,6 +46,22 @@
<view
class="shape-icon shape-icon-{{item.id}}"
style="--fill-color: {{item.fillColor}}; --border-color: #333333;">
<!-- 圆柱体底部 -->
<view
wx:if="{{item.id === 'cylinder'}}"
class="cylinder-bottom"></view>
<!-- 正方体右面 -->
<view
wx:if="{{item.id === 'cube'}}"
class="cube-right"></view>
<!-- 圆锥底部 -->
<view
wx:if="{{item.id === 'cone'}}"
class="cone-bottom"></view>
<!-- 爱心右半圆 -->
<view
wx:if="{{item.id === 'heart'}}"
class="heart-right"></view>
</view>
</view>
<!-- 形状名称 -->
@@ -142,7 +158,24 @@
</view>
<!-- 形状预览 -->
<view class="shape-preview-box">
<view class="shape-icon shape-icon-{{item.id}}"></view>
<view class="shape-icon shape-icon-{{item.id}}">
<!-- 圆柱体底部 -->
<view
wx:if="{{item.id === 'cylinder'}}"
class="cylinder-bottom"></view>
<!-- 正方体右面 -->
<view
wx:if="{{item.id === 'cube'}}"
class="cube-right"></view>
<!-- 圆锥底部 -->
<view
wx:if="{{item.id === 'cone'}}"
class="cone-bottom"></view>
<!-- 爱心右半圆 -->
<view
wx:if="{{item.id === 'heart'}}"
class="heart-right"></view>
</view>
</view>
<text class="shape-name">{{item.name}}</text>
</view>
miniprogram/demoPages/shapePrint/shapes.js
+29
View File
@@ -84,6 +84,35 @@ const shapes = [
svg: '<polygon points="30,20 70,20 85,80 15,80" stroke="#333" stroke-width="2" fill="none"/>',
drawFunction: 'drawTrapezoid',
},
// 新增3D形状
{
id: 'cylinder',
name: '圆柱体',
type: '3d-cylinder',
svg: '<ellipse cx="50" cy="20" rx="30" ry="8" stroke="#333" stroke-width="2" fill="none"/><rect x="20" y="20" width="60" height="50" stroke="none" fill="none"/><line x1="20" y1="20" x2="20" y2="70" stroke="#333" stroke-width="2"/><line x1="80" y1="20" x2="80" y2="70" stroke="#333" stroke-width="2"/><ellipse cx="50" cy="70" rx="30" ry="8" stroke="#333" stroke-width="2" fill="none"/>',
drawFunction: 'drawCylinder',
},
{
id: 'cube',
name: '正方体',
type: '3d-cube',
svg: '<polygon points="20,30 60,30 60,70 20,70" stroke="#333" stroke-width="2" fill="none"/><polygon points="30,20 70,20 70,60 30,60" stroke="#333" stroke-width="2" fill="none"/><line x1="20" y1="30" x2="30" y2="20" stroke="#333" stroke-width="2"/><line x1="60" y1="30" x2="70" y2="20" stroke="#333" stroke-width="2"/><line x1="60" y1="70" x2="70" y2="60" stroke="#333" stroke-width="2"/>',
drawFunction: 'drawCube',
},
{
id: 'sphere',
name: '球体',
type: '3d-sphere',
svg: '<circle cx="50" cy="50" r="35" stroke="#333" stroke-width="2" fill="none"/><ellipse cx="50" cy="50" rx="35" ry="15" stroke="#333" stroke-width="1" fill="none" opacity="0.5"/><ellipse cx="50" cy="50" rx="15" ry="35" stroke="#333" stroke-width="1" fill="none" opacity="0.5"/>',
drawFunction: 'drawSphere',
},
{
id: 'cone',
name: '圆锥体',
type: '3d-cone',
svg: '<ellipse cx="50" cy="80" rx="30" ry="8" stroke="#333" stroke-width="2" fill="none"/><line x1="20" y1="80" x2="50" y2="20" stroke="#333" stroke-width="2"/><line x1="80" y1="80" x2="50" y2="20" stroke="#333" stroke-width="2"/>',
drawFunction: 'drawCone',
},
];
// 颜色选项