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-08-07 17:36:04 +08:00
parent d3c1a2fd78
commit 738358ab76
17 changed files with 455 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/components/shape-card-v1/shape-card copy.less
-57
View File
@@ -1,57 +0,0 @@
.shape-card {
position: relative;
width: 300rpx;
height: 300rpx;
border-radius: 16rpx;
// background: #f5f5f5;
background: #ffffff;
border: 1rpx solid rgba(242, 242, 242, 1);
box-shadow: 0rpx 16rpx 24rpx rgba(184, 210, 188, 0.2);
.shape-card-img-wrapper {
padding: 16rpx;
width: 100%;
height: 200rpx;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
.shape-card-img {
width: 180rpx;
height: 180rpx;
}
}
.shape-card-footer {
margin-inline: 32rpx;
padding-block: 16rpx;
display: flex;
justify-content: start;
align-items: center;
border-top: 1rpx solid #CCCCCC;
.shape-card-footer-color {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
border: 2rpx solid #141414;
margin-right: 34rpx;
}
.shape-card-footer-name {
font-size: 28rpx;
color: #141414;
}
}
.delete-icon {
position: absolute;
top: -18rpx;
right: -18rpx;
.delete-icon-inner {
color: rgba(255, 0, 0, 0.7);
}
}
}
miniprogram/components/shape-card-v1/shape-card.json
-7
View File
@@ -1,7 +0,0 @@
{
"component": true,
"styleIsolation": "apply-shared",
"usingComponents": {
"van-icon": "@vant/weapp/icon/index"
}
}
miniprogram/components/shape-card-v1/shape-card.less
-58
View File
@@ -1,58 +0,0 @@
.shape-card {
position: relative;
width: 240rpx;
height: 240rpx;
border-radius: 16rpx;
// background: #f5f5f5;
background: #ffffff;
border: 1rpx solid rgba(242, 242, 242, 1);
box-shadow: 0rpx 16rpx 24rpx rgba(184, 210, 188, 0.2);
.shape-card-img-wrapper {
padding: 16rpx;
width: 100%;
height: 120rpx;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
.shape-card-img {
width: 120rpx;
height: 120rpx;
color: skyblue;
}
}
.shape-card-footer {
margin-inline: 32rpx;
padding-block: 16rpx;
display: flex;
justify-content: start;
align-items: center;
border-top: 1rpx solid #CCCCCC;
.shape-card-footer-color {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
border: 2rpx solid #141414;
margin-right: 34rpx;
}
.shape-card-footer-name {
font-size: 28rpx;
color: #141414;
}
}
.delete-icon {
position: absolute;
top: -18rpx;
right: -18rpx;
.delete-icon-inner {
color: rgba(255, 0, 0, 0.7);
}
}
}
miniprogram/components/shape-card-v1/shape-card.ts
-36
View File
@@ -1,36 +0,0 @@
Component({
/**
* 组件的属性列表
*/
properties: {
key: {
type: Number,
value: 0,
},
img: {
type: String,
value: '',
},
name: {
type: String,
value: '',
},
color: {
type: String,
value: '',
},
},
/**
* 组件的方法列表
*/
methods: {
onDelete() {
const { key } = this.data;
this.triggerEvent('onDelete', { key });
},
onColorTap() {
const { key, color } = this.data;
this.triggerEvent('onColorTap', { key, color });
},
},
});
miniprogram/components/shape-card-v1/shape-card.wxml
-19
View File
@@ -1,19 +0,0 @@
<view class="shape-card">
<view class="shape-card-img-wrapper">
<image src="{{ img }}" class="shape-card-img" />
</view>
<view class="shape-card-footer">
<view
class="shape-card-footer-color"
style="background-color: {{ color }}"
bind:tap="onColorTap"></view>
<view class="shape-card-footer-name">{{ name }}</view>
</view>
<view class="delete-icon" bindtap="onDelete">
<van-icon
class-prefix="toy-icon"
name="error-o"
custom-class="delete-icon-inner"
size="48rpx" />
</view>
</view>
miniprogram/components/shape-card/shape-card copy.less
-57
View File
@@ -1,57 +0,0 @@
.shape-card {
position: relative;
width: 300rpx;
height: 300rpx;
border-radius: 16rpx;
// background: #f5f5f5;
background: #ffffff;
border: 1rpx solid rgba(242, 242, 242, 1);
box-shadow: 0rpx 16rpx 24rpx rgba(184, 210, 188, 0.2);
.shape-card-img-wrapper {
padding: 16rpx;
width: 100%;
height: 200rpx;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
.shape-card-img {
width: 180rpx;
height: 180rpx;
}
}
.shape-card-footer {
margin-inline: 32rpx;
padding-block: 16rpx;
display: flex;
justify-content: start;
align-items: center;
border-top: 1rpx solid #CCCCCC;
.shape-card-footer-color {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
border: 2rpx solid #141414;
margin-right: 34rpx;
}
.shape-card-footer-name {
font-size: 28rpx;
color: #141414;
}
}
.delete-icon {
position: absolute;
top: -18rpx;
right: -18rpx;
.delete-icon-inner {
color: rgba(255, 0, 0, 0.7);
}
}
}
miniprogram/components/shape-card/shape-card.less
+2 -2
View File
@@ -27,8 +27,8 @@
}
.shape-color {
width: 72rpx;
height: 72rpx;
width: 60rpx;
height: 60rpx;
border-radius: 50%;
border: 1rpx solid #141414;
background-color: skyblue;
miniprogram/components/shape-card/shape-card.ts
+25 -8
View File
@@ -11,7 +11,7 @@ Component({
type: String,
value: '',
},
color: {
fillColor: {
type: String,
value: '',
},
@@ -34,7 +34,7 @@ Component({
* 监听属性变化
*/
observers: {
'svg, color': function () {
'svg, fillColor': function () {
this.generateSvgDataUri();
}
},
@@ -46,12 +46,24 @@ Component({
* 生成完整的 SVG Data URI
*/
generateSvgDataUri() {
const { svg, color } = this.data;
const { svg, fillColor } = this.data;
if (fillColor === 'transparent') return;
if (!svg) return;
// 创建完整的 SVG 字符串，替换填充颜色
const coloredSvg = svg.replace(/fill="#ff0000"/g, `fill="${color || '#ff0000'}"`);
const completeSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">${coloredSvg}</svg>`;
// 处理 fill 属性：无论原来有没有 fill，都要赋值为 fillColor
let processedSvg = svg;
// 1. 如果有 fill 属性，全部替换为 fillColor
if (/fill="[^"]*"/.test(processedSvg)) {
processedSvg = processedSvg.replace(/fill="[^"]*"/g, `fill="${fillColor || '#ff0000'}"`);
} else {
// 2. 没有 fill 属性，则在第一个标签内加上 fill
processedSvg = processedSvg.replace(
/(<(?:circle|rect|polygon|ellipse|path|line)[^>]*?)(\/?>)/,
`$1 fill="${fillColor || '#ff0000'}"$2`
);
}
const completeSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">${processedSvg}</svg>`;
// 转换为 Data URI
const svgDataUri = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(completeSvg)}`;
@@ -65,8 +77,13 @@ Component({
this.triggerEvent('onDelete', { key });
},
onColorTap() {
const { key, color } = this.data;
this.triggerEvent('onColorTap', { key, color });
const { key, fillColor } = this.data;
this.triggerEvent('onColorTap', { key, fillColor });
},
onShapeTap() {
const { key } = this.data;
this.triggerEvent('onShapeTap', { key });
},
},
});
miniprogram/components/shape-card/shape-card.wxml
+6 -2
View File
@@ -1,9 +1,13 @@
<view class="shape-card">
<image src="{{ svgDataUri }}" class="shape-card-img" mode="aspectFit" />
<image
src="{{ svgDataUri }}"
class="shape-card-img"
mode="aspectFit"
bind:tap="onShapeTap" />
<view class="divider" />
<view
class="shape-color"
style="background-color: {{ color }}"
style="background-color: {{ fillColor }}"
bind:tap="onColorTap" />
<van-icon
class-prefix="toy-icon"
miniprogram/components/shape-picker/shape-picker.json
+8
View File
@@ -0,0 +1,8 @@
{
"component": true,
"styleIsolation": "isolated",
"usingComponents": {
"van-popup": "@vant/weapp/popup/index",
"toy-button": "/ui/button/button"
}
}
miniprogram/components/shape-picker/shape-picker.less
+101
View File
@@ -0,0 +1,101 @@
.shape-picker-popup {
border-radius: 20rpx;
.shape-picker-container {
width: 642rpx;
background-color: #fff;
border-radius: 20rpx;
box-shadow: 0 3rpx 4rpx rgba(0, 0, 0, 0.15);
display: flex;
flex-direction: column;
padding: 36rpx 36rpx;
box-sizing: border-box;
align-items: center;
.shape-picker-title {
font-size: 32rpx;
color: #141414;
font-weight: bold;
margin-bottom: 30rpx;
text-align: center;
}
.shape-options-wrapper {
padding: 28rpx 0;
width: 100%;
height: 500rpx;
overflow-y: auto;
}
.shape-options {
display: grid;
grid-template-columns: repeat(3, 186rpx);
gap: 12rpx;
width: 100%;
justify-content: center;
.shape-option {
width: 140rpx;
display: flex;
flex-direction: column;
align-items: center;
transition: all 0.2s ease;
padding: 10rpx;
border-radius: 10rpx;
border: 1rpx solid transparent;
.shape-svg-container {
width: 140rpx;
height: 140rpx;
display: flex;
align-items: center;
justify-content: center;
border: 1rpx solid #141414;
border-radius: 8rpx;
background-color: #fafafa;
margin-bottom: 8rpx;
position: relative;
.shape-svg {
width: 140rpx;
height: 140rpx;
display: block;
}
}
.shape-name {
font-size: 24rpx;
color: #141414;
text-align: center;
line-height: 1.2;
}
&.selected {
// transform: scale(1.1);
// border: 1px solid rgb(147, 211, 51);
// background-color: rgba(64, 150, 255, 0.05);
.shape-svg-container {
border: 1px solid #93d333;
// border: 1px solid #4096ff;
// background-color: #fff;
// box-shadow: 0 0 6rpx 2rpx rgba(147, 211, 51, 0.2);
}
.shape-name {
color: rgb(147, 211, 51);
// font-weight: bold;
}
}
}
}
}
}
.btn-area {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin: 10rpx 24rpx;
}
miniprogram/components/shape-picker/shape-picker.ts
+122
View File
@@ -0,0 +1,122 @@
import { SHAPES, ShapeCard } from '../../constants/shapes';
Component({
options: {},
/**
* 组件的属性列表
*/
properties: {
show: {
type: Boolean,
value: false,
},
selectedShape: {
type: String,
value: '',
},
currentShapeKey: {
type: String,
value: '',
},
},
/**
* 组件的初始数据
*/
data: {
shapes: [] as (ShapeCard & { svgDataUrl: string })[],
selectedShapes: [] as string[], // 多选模式下选中的形状数组
},
lifetimes: {
attached() {
// 处理 SVG 数据，转换为 data URL
const shapesWithDataUrl = SHAPES.map(shape => {
const completeSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">${shape.svg}</svg>`;
const svgDataUri = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(completeSvg)}`;
return {
...shape,
svgDataUrl: svgDataUri
};
});
console.log('shapesWithDataUrl---:', shapesWithDataUrl);
this.setData({
shapes: shapesWithDataUrl
});
},
},
/**
* 组件的方法列表
*/
methods: {
onClose() {
this.triggerEvent('onClose');
},
onSelectShape(e: WechatMiniprogram.TouchEvent) {
const { index } = e.currentTarget.dataset;
const { currentShapeKey, shapes } = this.data;
if (currentShapeKey) {
// 单选模式：currentShapeKey 不为空时，只能选中一个形状
this.setData({
shapes: shapes.map((item, i) => ({
...item,
checked: i === index
}))
});
} else {
// 多选模式：currentShapeKey 为空时，支持多选，最多可选6个
let shapesCopy = this.data.shapes.map(item => ({ ...item }));
const targetIndex = index;
// 统计当前已选中的数量
const checkedCount = shapesCopy.filter(item => item.checked).length;
if (shapesCopy[targetIndex].checked) {
// 如果已选中，则取消选中
shapesCopy[targetIndex].checked = false;
} else {
if (checkedCount >= 6) {
wx.showToast({
title: '最多可选择6个形状',
icon: 'none',
duration: 1500
});
return;
}
// 如果未选中，则添加到选中列表
shapesCopy[targetIndex].checked = true;
}
this.setData({
shapes: shapesCopy,
});
}
},
onChange() {
const { selectedShape, selectedShapes, currentShapeKey } = this.data;
if (currentShapeKey) {
// 单选模式：返回单个选中的形状
this.triggerEvent('onChange', { shape: selectedShape, currentShapeKey });
} else {
// 多选模式：返回选中的形状数组
this.triggerEvent('onChange', { shapes: selectedShapes });
}
},
// 获取选中状态的 CSS 类名
getShapeClass(shapeId: string): string {
const { currentShapeKey, selectedShapes } = this.data;
if (currentShapeKey) {
// 单选模式：检查是否等于当前选中的形状
return shapeId === currentShapeKey ? 'selected single-mode' : '';
} else {
// 多选模式：检查是否在选中列表中
return selectedShapes.includes(shapeId) ? 'selected multi-mode' : '';
}
},
},
});
miniprogram/components/shape-picker/shape-picker.wxml
+46
View File
@@ -0,0 +1,46 @@
<van-popup
show="{{ show }}"
bind:close="onClose"
custom-class="shape-picker-popup">
<view class="shape-picker-container">
<text class="shape-picker-title"
>选择形状{{ currentShapeKey ? '' : '（多选）' }}</text
>
<view class="shape-options-wrapper">
<view class="shape-options">
<view
wx:for="{{shapes}}"
wx:key="id"
class="shape-option {{item.checked ? 'selected' : '' }}"
bindtap="onSelectShape"
data-index="{{index}}"
data-shape="{{item.id}}">
<view class="shape-svg-container">
<image
class="shape-svg"
src="{{ item.svgDataUrl }}"
mode="aspectFit" />
<!-- 多选模式下显示选中标记 -->
<view wx:if="{{ item.checked }}" class="selected-icon">
<toy-icon
name="ic_check"
size="24"
color="#93d333" />
</view>
</view>
<text class="shape-name">{{item.name}}</text>
</view>
</view>
</view>
<view class="btn-area">
<toy-button
type="primary"
bind:click="onChange"
width="400rpx"
disabled="{{ currentShapeKey ? !selectedShape : selectedShapes.length === 0 }}">
确认选择{{ !currentShapeKey && selectedShapes.length > 0 ? '（'
+ selectedShapes.length + '个）' : '' }}
</toy-button>
</view>
</view>
</van-popup>
miniprogram/constants/shapes.ts
+46 -18
View File
@@ -6,7 +6,18 @@
*
*/
const SHAPES = [
interface ShapeCard {
id: string;
name: string;
type: string;
svg: string;
svgDataUrl?: string;
fillColor: string;
drawFunction?: string;
checked?: boolean;
}
const SHAPES: ShapeCard[] = [
// 三角形
{
id: 'obtuse-triangle',
@@ -14,13 +25,15 @@ const SHAPES = [
type: 'triangle',
// svg: '<polygon points="20,20 80,80 35,65" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<polygon points="15,15 85,85 20,70" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
fillColor: '#ff0000',
drawFunction: 'drawTriangle',
},
{
id: 'right-triangle',
name: '直角三角形',
type: 'triangle',
svg: '<polygon points="15,15 15,85 85,85" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<polygon points="15,15 15,85 85,85" stroke="#141414" stroke-width="1" fill="transparent"/>',
fillColor: '#ff0000',
drawFunction: 'drawTriangle',
},
{
@@ -28,7 +41,8 @@ const SHAPES = [
name: '等腰三角形',
type: 'triangle',
// svg: '<polygon points="15,15 85,15 50,85" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<polygon points="50,15 85,85 15,85" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<polygon points="50,15 85,85 15,85" stroke="#141414" stroke-width="1" fill="transparent"/>',
fillColor: '#ff0000',
drawFunction: 'drawTriangle',
},
// 四边形
@@ -37,7 +51,8 @@ const SHAPES = [
name: '正方形',
type: 'rect',
// svg: '<rect x="20" y="20" width="60" height="60" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<rect x="15" y="15" width="70" height="70" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<rect x="15" y="15" width="70" height="70" stroke="#141414" stroke-width="1" fill="transparent"/>',
fillColor: '#ff0000',
drawFunction: 'drawSquare',
},
{
@@ -45,7 +60,8 @@ const SHAPES = [
name: '长方形',
type: 'rect',
// svg: '<rect x="20" y="20" width="60" height="40" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<rect x="15" y="25" width="70" height="50" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<rect x="15" y="25" width="70" height="50" stroke="#141414" stroke-width="1" fill="transparent"/>',
fillColor: '#ff0000',
drawFunction: 'drawRectangle',
},
{
@@ -53,7 +69,8 @@ const SHAPES = [
name: '平行四边形',
type: 'rect',
// svg: '<polygon points="20,30 70,30 90,70 40,70" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<polygon points="15,30 70,30 85,70 30,70" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<polygon points="15,30 70,30 85,70 30,70" stroke="#141414" stroke-width="1" fill="transparent"/>',
fillColor: '#ff0000',
drawFunction: 'drawParallelogram',
},
{
@@ -61,7 +78,8 @@ const SHAPES = [
name: '菱形',
type: 'rect',
// svg: '<polygon points="50,20 70,50 50,80 30,50" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<polygon points="50,15 70,50 50,85 30,50" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<polygon points="50,15 70,50 50,85 30,50" stroke="#141414" stroke-width="1" fill="transparent"/>',
fillColor: '#ff0000',
drawFunction: 'drawParallelogram',
},
{
@@ -69,7 +87,8 @@ const SHAPES = [
name: "梯形",
type: 'rect',
// svg: '<polygon points="40,30 70,30 90,70 20,70" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<polygon points="30,25 70,25 90,75 10,75" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<polygon points="30,25 70,25 90,75 10,75" stroke="#141414" stroke-width="1" fill="transparent"/>',
fillColor: '#ff0000',
drawFunction: 'drawTrapezoid',
},
// 五边形
@@ -78,7 +97,8 @@ const SHAPES = [
name: '五边形',
type: 'rect',
// svg: '<polygon points="50,10,80,35,68,70,32,70,20,35" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<polygon points="50,20,80,45,68,80,32,80,20,45" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<polygon points="50,20,80,45,68,80,32,80,20,45" stroke="#141414" stroke-width="1" fill="transparent"/>',
fillColor: '#ff0000',
drawFunction: 'drawHexagon',
},
@@ -87,7 +107,8 @@ const SHAPES = [
id: 'hexagon',
name: '六边形',
type: 'rect',
svg: '<polygon points="15.4,30 50,10 84.6,30 84.6,70 50,90 15.4,70" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<polygon points="15.4,30 50,10 84.6,30 84.6,70 50,90 15.4,70" stroke="#141414" stroke-width="1" fill="transparent"/>',
fillColor: '#ff0000',
drawFunction: 'drawHexagon',
},
// 五角星
@@ -95,7 +116,8 @@ const SHAPES = [
id: 'pentagram',
name: '五角星',
type: 'rect',
svg: '<polygon points="50,20 61,42 85,44 67,60 71,85 50,75 29,85 33,60 15,44 39,42" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<polygon points="50,20 61,42 85,44 67,60 71,85 50,75 29,85 33,60 15,44 39,42" stroke="#141414" stroke-width="1" fill="transparent"/>',
fillColor: '#ff0000',
drawFunction: 'drawPentagram',
},
// 心形
@@ -103,7 +125,8 @@ const SHAPES = [
id: 'heart',
name: '心形',
type: 'rect',
svg: '<path d="M50,35 C35,20 20,35 25,50 C30,65 50,80 50,80 C50,80 70,65 75,50 C80,35 65,20 50,35Z" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<path d="M50,35 C35,20 20,35 25,50 C30,65 50,80 50,80 C50,80 70,65 75,50 C80,35 65,20 50,35Z" stroke="#141414" stroke-width="1" fill="transparent"/>',
fillColor: '#ff0000',
drawFunction: 'drawHeart',
},
// 圆形
@@ -111,7 +134,8 @@ const SHAPES = [
id: 'circle',
name: '圆形',
type: 'circle',
svg: '<circle cx="50" cy="50" r="36" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<circle cx="50" cy="50" r="36" stroke="#141414" stroke-width="1" fill="transparent"/>',
fillColor: '#ff0000',
drawFunction: 'drawCircle',
},
// 椭圆
@@ -119,7 +143,8 @@ const SHAPES = [
id: 'ellipse',
name: '椭圆',
type: 'circle',
svg: '<ellipse cx="50" cy="50" rx="40" ry="25" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<ellipse cx="50" cy="50" rx="40" ry="25" stroke="#141414" stroke-width="1" fill="transparent"/>',
fillColor: '#ff0000',
drawFunction: 'drawEllipse',
},
// 半圆
@@ -128,7 +153,8 @@ const SHAPES = [
name: '半圆',
type: 'circle',
// svg: '<path d="M20,70 A20,20 0 0,1 80,70 L70,70 Z" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<path d="M15,65 A20,20 0 0,1 85,65 L85,65 Z" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<path d="M15,65 A20,20 0 0,1 85,65 L85,65 Z" stroke="#141414" stroke-width="1" fill="transparent"/>',
fillColor: '#ff0000',
drawFunction: 'drawSemicircle',
},
// 扇形
@@ -137,7 +163,8 @@ const SHAPES = [
name: '扇形',
type: 'circle',
// svg: '<path d="M50,70 L80,35 A40,40 0 0,0 20,35 L50,70 Z" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<path d="M50,75 L80,35 A40,40 0 0,0 20,35 L50,75 Z" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<path d="M50,75 L80,35 A40,40 0 0,0 20,35 L50,75 Z" stroke="#141414" stroke-width="1" fill="transparent"/>',
fillColor: '#ff0000',
drawFunction: 'drawSector',
},
// 圆环
@@ -146,9 +173,10 @@ const SHAPES = [
name: '圆环',
type: 'circle',
// svg: '<path d="M75,50 A25,25 0 1,0 25,50 A25,25 0 1,0 75,50 ZM65,50 A15,15 0 1,0 35,50 A15,15 0 1,0 65,50 Z" fill="#ff0000" fill-rule="evenodd" stroke="#141414" stroke-width="1"/>',
svg: '<path d="M85,50 A30,30 0 1,0 15,50 A30,30 0 1,0 85,50 ZM65,50A15,15 0 1,0 35,50A15,15 0 1,0 65,50 Z" fill="#ff0000" fill-rule="evenodd" stroke="#141414" stroke-width="1"/>',
svg: '<path d="M85,50 A30,30 0 1,0 15,50 A30,30 0 1,0 85,50 ZM65,50A15,15 0 1,0 35,50A15,15 0 1,0 65,50 Z" fill="transparent" fill-rule="evenodd" stroke="#141414" stroke-width="1"/>',
fillColor: '#ff0000',
drawFunction: 'drawRing',
},
];
export { SHAPES };
export { SHAPES, ShapeCard };
miniprogram/pages/shape/index.json
+2 -1
View File
@@ -9,6 +9,7 @@
"van-icon": "@vant/weapp/icon/index",
"van-popup": "@vant/weapp/popup/index",
"toy-button": "../../ui/button/button",
"shape-card": "../../components/shape-card/shape-card"
"shape-card": "../../components/shape-card/shape-card",
"shape-picker": "../../components/shape-picker/shape-picker"
}
}
miniprogram/pages/shape/index.ts
+90 -2
View File
@@ -1,11 +1,99 @@
import { SHAPES } from '../../constants/shapes';
import { SHAPES, ShapeCard } from '../../constants/shapes';
import { WATER_COLORS, PAPER_SIZE } from '../../constants/colors';
Page({
data: {
shapeList: SHAPES,
shapeList: [] as ShapeCard[],
showSelectShapePopup: false,
currentShapeKey: '',
},
onLoad() {
},
openSelectShapePopup(e: any) {
const { key } = e.detail;
this.setData({
showSelectShapePopup: true,
currentShapeKey: key
});
},
closeSelectShapePopup() {
this.setData({
showSelectShapePopup: false,
currentShapeKey: ''
});
},
onChangeShape(e: any) {
const { shape, currentShapeKey, shapes } = e.detail;
console.log('shape', shape);
console.log('shapes', shapes);
if (currentShapeKey) {
this.setData({
showSelectShapePopup: false,
currentShapeKey: '',
shapeList: this.data.shapeList.map(item => {
if (item.id === currentShapeKey) {
return { ...item, fillColor: item.fillColor };
}
return item;
})
});
} else {
// 随机从 WATER_COLORS.basic12 中获取不重复的颜色
const colorList = WATER_COLORS.basic12.map(item => item.hex);
const colorsCopy = [...colorList];
for (let i = colorsCopy.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[colorsCopy[i], colorsCopy[j]] = [colorsCopy[j], colorsCopy[i]];
}
const selectedColors = colorsCopy.slice(0, shapes.length);
this.setData({
showSelectShapePopup: false,
currentShapeKey: '',
shapeList: shapes.map((item: ShapeCard, idx: number) => ({
...item,
fillColor: selectedColors[idx] || item.fillColor
}))
});
}
},
/**
* 随机生成6个图形
*/
refreshShapeCard() {
// 随机取6个图形
const shapesCopy = [...SHAPES];
for (let i = shapesCopy.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[shapesCopy[i], shapesCopy[j]] = [shapesCopy[j], shapesCopy[i]];
}
const selectedShapes = shapesCopy.slice(0, 6);
// 随机取6个颜色
const colorList = WATER_COLORS.basic12.map(item => item.hex);
const colorsCopy = [...colorList];
for (let i = colorsCopy.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[colorsCopy[i], colorsCopy[j]] = [colorsCopy[j], colorsCopy[i]];
}
const selectedColors = colorsCopy.slice(0, 6);
// 分配颜色到图形
const shapeList = selectedShapes.map((shape, idx) => ({
...shape,
fillColor: selectedColors[idx]
}));
// 更新数据
this.setData({
shapeList
});
}
});
miniprogram/pages/shape/index.wxml
+7 -1
View File
@@ -26,9 +26,15 @@
wx:key="{{index}}"
key="{{index}}"
svg="{{ item.svg }}"
color="{{ item.color }}"
fillColor="{{ item.fillColor }}"
bind:onShapeTap="openSelectShapePopup"
bind:onDelete="onDelete"
bind:onColorTap="onColorTap" />
</view>
</view>
<shape-picker
show="{{showSelectShapePopup}}"
currentShapeKey="{{currentShapeKey}}"
bind:onClose="closeSelectShapePopup"
bind:onChange="onChangeShape" />
</view>