diff --git a/miniprogram/assets/shapes/半圆.svg b/miniprogram/assets/shapes/半圆.svg
new file mode 100644
index 0000000..0fa32f5
--- /dev/null
+++ b/miniprogram/assets/shapes/半圆.svg
@@ -0,0 +1,4 @@
+
diff --git a/miniprogram/components/shape-card-v1/shape-card copy.less b/miniprogram/components/shape-card-v1/shape-card copy.less
new file mode 100644
index 0000000..9f139cd
--- /dev/null
+++ b/miniprogram/components/shape-card-v1/shape-card copy.less
@@ -0,0 +1,57 @@
+.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);
+ }
+ }
+}
\ No newline at end of file
diff --git a/miniprogram/components/shape-card-v1/shape-card.json b/miniprogram/components/shape-card-v1/shape-card.json
new file mode 100644
index 0000000..44daf20
--- /dev/null
+++ b/miniprogram/components/shape-card-v1/shape-card.json
@@ -0,0 +1,7 @@
+{
+ "component": true,
+ "styleIsolation": "apply-shared",
+ "usingComponents": {
+ "van-icon": "@vant/weapp/icon/index"
+ }
+}
diff --git a/miniprogram/components/shape-card-v1/shape-card.less b/miniprogram/components/shape-card-v1/shape-card.less
new file mode 100644
index 0000000..70fd139
--- /dev/null
+++ b/miniprogram/components/shape-card-v1/shape-card.less
@@ -0,0 +1,58 @@
+.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);
+ }
+ }
+}
\ No newline at end of file
diff --git a/miniprogram/components/shape-card-v1/shape-card.ts b/miniprogram/components/shape-card-v1/shape-card.ts
new file mode 100644
index 0000000..1450f19
--- /dev/null
+++ b/miniprogram/components/shape-card-v1/shape-card.ts
@@ -0,0 +1,36 @@
+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 });
+ },
+ },
+});
diff --git a/miniprogram/components/shape-card-v1/shape-card.wxml b/miniprogram/components/shape-card-v1/shape-card.wxml
new file mode 100644
index 0000000..f3e8cd7
--- /dev/null
+++ b/miniprogram/components/shape-card-v1/shape-card.wxml
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+
+
+
diff --git a/miniprogram/components/shape-card/shape-card.less b/miniprogram/components/shape-card/shape-card.less
index 70fd139..bb7b411 100644
--- a/miniprogram/components/shape-card/shape-card.less
+++ b/miniprogram/components/shape-card/shape-card.less
@@ -1,58 +1,43 @@
.shape-card {
position: relative;
- width: 240rpx;
- height: 240rpx;
+ width: 186rpx;
+ // height: 260rpx;
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);
+ border: 1rpx solid #e8e8e8;
+ box-shadow: 0rpx 16rpx 24rpx rgba(184, 210, 188, 0.3);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 16rpx 0;
+ box-sizing: border-box;
- .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-img {
+ width: 140rpx;
+ height: 140rpx;
+ display: block;
}
- .shape-card-footer {
- margin-inline: 32rpx;
- padding-block: 16rpx;
- display: flex;
- justify-content: start;
- align-items: center;
- border-top: 1rpx solid #CCCCCC;
+ .divider {
+ width: 150rpx;
+ height: 1rpx;
+ background-color: #ddd;
+ margin-block: 16rpx;
+ }
- .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;
- }
+ .shape-color {
+ width: 72rpx;
+ height: 72rpx;
+ border-radius: 50%;
+ border: 1rpx solid #141414;
+ background-color: skyblue;
}
.delete-icon {
position: absolute;
- top: -18rpx;
- right: -18rpx;
-
- .delete-icon-inner {
- color: rgba(255, 0, 0, 0.7);
- }
+ top: -16rpx;
+ right: -16rpx;
+ color: rgba(255, 0, 0);
}
}
\ No newline at end of file
diff --git a/miniprogram/components/shape-card/shape-card.ts b/miniprogram/components/shape-card/shape-card.ts
index 1450f19..68050c6 100644
--- a/miniprogram/components/shape-card/shape-card.ts
+++ b/miniprogram/components/shape-card/shape-card.ts
@@ -7,11 +7,7 @@ Component({
type: Number,
value: 0,
},
- img: {
- type: String,
- value: '',
- },
- name: {
+ svg: {
type: String,
value: '',
},
@@ -20,10 +16,50 @@ Component({
value: '',
},
},
+ /**
+ * 组件的初始数据
+ */
+ data: {
+ svgDataUri: '',
+ },
+ /**
+ * 组件生命周期
+ */
+ lifetimes: {
+ attached() {
+ this.generateSvgDataUri();
+ },
+ },
+ /**
+ * 监听属性变化
+ */
+ observers: {
+ 'svg, color': function () {
+ this.generateSvgDataUri();
+ }
+ },
/**
* 组件的方法列表
*/
methods: {
+ /**
+ * 生成完整的 SVG Data URI
+ */
+ generateSvgDataUri() {
+ const { svg, color } = this.data;
+ if (!svg) return;
+
+ // 创建完整的 SVG 字符串，替换填充颜色
+ const coloredSvg = svg.replace(/fill="#ff0000"/g, `fill="${color || '#ff0000'}"`);
+ const completeSvg = ``;
+
+ // 转换为 Data URI
+ const svgDataUri = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(completeSvg)}`;
+
+ this.setData({
+ svgDataUri: svgDataUri
+ });
+ },
onDelete() {
const { key } = this.data;
this.triggerEvent('onDelete', { key });
diff --git a/miniprogram/components/shape-card/shape-card.wxml b/miniprogram/components/shape-card/shape-card.wxml
index f3e8cd7..a1aee73 100644
--- a/miniprogram/components/shape-card/shape-card.wxml
+++ b/miniprogram/components/shape-card/shape-card.wxml
@@ -1,19 +1,14 @@
-
-
-
-
-
-
-
+
+
+
+
diff --git a/miniprogram/constants/shapes.ts b/miniprogram/constants/shapes.ts
index 0bf16f6..554958f 100644
--- a/miniprogram/constants/shapes.ts
+++ b/miniprogram/constants/shapes.ts
@@ -1,57 +1,153 @@
+/**
+ * 钝角三角形
+ *
+ *
+ */
+
const SHAPES = [
+ // 三角形
+ {
+ id: 'obtuse-triangle',
+ name: '钝角三角形',
+ type: 'triangle',
+ // svg: '',
+ svg: '',
+ drawFunction: 'drawTriangle',
+ },
+ {
+ id: 'right-triangle',
+ name: '直角三角形',
+ type: 'triangle',
+ svg: '',
+ drawFunction: 'drawTriangle',
+ },
+ {
+ id: 'acute-triangle',
+ name: '等腰三角形',
+ type: 'triangle',
+ // svg: '',
+ svg: '',
+ drawFunction: 'drawTriangle',
+ },
+ // 四边形
+ {
+ id: 'square',
+ name: '正方形',
+ type: 'rect',
+ // svg: '',
+ svg: '',
+ drawFunction: 'drawSquare',
+ },
+ {
+ id: 'rectangle',
+ name: '长方形',
+ type: 'rect',
+ // svg: '',
+ svg: '',
+ drawFunction: 'drawRectangle',
+ },
+ {
+ id: 'rectangle',
+ name: '平行四边形',
+ type: 'rect',
+ // svg: '',
+ svg: '',
+ drawFunction: 'drawParallelogram',
+ },
+ {
+ id: 'parallelogram',
+ name: '菱形',
+ type: 'rect',
+ // svg: '',
+ svg: '',
+ drawFunction: 'drawParallelogram',
+ },
+ {
+ id: 'trapezoid',
+ name: "梯形",
+ type: 'rect',
+ // svg: '',
+ svg: '',
+ drawFunction: 'drawTrapezoid',
+ },
+ // 五边形
+ {
+ id: 'pentagon',
+ name: '五边形',
+ type: 'rect',
+ // svg: '',
+ svg: '',
+ drawFunction: 'drawHexagon',
+ },
+
+ // 六边形
+ {
+ id: 'hexagon',
+ name: '六边形',
+ type: 'rect',
+ svg: '',
+ drawFunction: 'drawHexagon',
+ },
+ // 五角星
+ {
+ id: 'pentagram',
+ name: '五角星',
+ type: 'rect',
+ svg: '',
+ drawFunction: 'drawPentagram',
+ },
+ // 心形
+ {
+ id: 'heart',
+ name: '心形',
+ type: 'rect',
+ svg: '',
+ drawFunction: 'drawHeart',
+ },
+ // 圆形
{
id: 'circle',
name: '圆形',
- img: '/assets/shapes/circle.webp',
- color: '#FF0000',
type: 'circle',
- svg: '',
+ svg: '',
drawFunction: 'drawCircle',
},
+ // 椭圆
{
- id: 'square',
- name: '正方形',
- img: '/assets/shapes/square.webp',
- color: '#0000FF',
- type: 'rect',
- svg: '',
- drawFunction: 'drawSquare',
- },
- {
- id: 'circle2',
- name: '圆形',
- img: '/assets/shapes/circle2.svg',
- color: '#FF0000',
+ id: 'ellipse',
+ name: '椭圆',
type: 'circle',
- svg: '',
- drawFunction: 'drawCircle',
+ svg: '',
+ drawFunction: 'drawEllipse',
},
+ // 半圆
{
- id: 'square',
- name: '正方形',
- img: '/assets/shapes/square.webp',
- color: '#0000FF',
- type: 'rect',
- svg: '',
- drawFunction: 'drawSquare',
- },
- {
- id: 'circle',
- name: '圆形',
- img: '/assets/shapes/circle.webp',
- color: '#FF0000',
+ id: 'semicircle',
+ name: '半圆',
type: 'circle',
- svg: '',
- drawFunction: 'drawCircle',
+ // svg: '',
+ svg: '',
+ drawFunction: 'drawSemicircle',
},
+ // 扇形
{
- id: 'square',
- name: '正方形',
- img: '/assets/shapes/square.webp',
- color: '#0000FF',
- type: 'rect',
- svg: '',
- drawFunction: 'drawSquare',
+ id: 'sector',
+ name: '扇形',
+ type: 'circle',
+ // svg: '',
+ svg: '',
+ drawFunction: 'drawSector',
+ },
+ // 圆环
+ {
+ id: 'ring',
+ name: '圆环',
+ type: 'circle',
+ // svg: '',
+ svg: '',
+ drawFunction: 'drawRing',
},
];
diff --git a/miniprogram/pages/shape/index.less b/miniprogram/pages/shape/index.less
index 2bcb134..a7c37bf 100644
--- a/miniprogram/pages/shape/index.less
+++ b/miniprogram/pages/shape/index.less
@@ -38,12 +38,8 @@ page {
.shape-list {
display: flex;
flex-wrap: wrap;
- gap: 24rpx; // 卡片间距，可调整
-
- shape-card {
- width: calc(50% - 12rpx); // 两个一行，减去一半的gap
- box-sizing: border-box;
- margin-bottom: 24rpx;
- }
+ column-gap: 50rpx;
+ row-gap: 24rpx;
+ justify-content: flex-start;
}
}
\ No newline at end of file
diff --git a/miniprogram/pages/shape/index.wxml b/miniprogram/pages/shape/index.wxml
index cd73366..6cd0447 100644
--- a/miniprogram/pages/shape/index.wxml
+++ b/miniprogram/pages/shape/index.wxml
@@ -25,8 +25,7 @@
wx:for-index="index"
wx:key="{{index}}"
key="{{index}}"
- img="{{ item.img }}"
- name="{{ item.name }}"
+ svg="{{ item.svg }}"
color="{{ item.color }}"
bind:onDelete="onDelete"
bind:onColorTap="onColorTap" />