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

feat: 准备各个形状的 svg 图

Browse Source
This commit is contained in:
joey
2025-08-01 17:37:56 +08:00
parent 5ce211ee5a
commit d3c1a2fd78
12 changed files with 403 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/assets/shapes/半圆.svg
+4
View File
@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="60" height="60" viewBox="0 0 60 60" fill="none">
<path d="M52 38C52 25.8497 42.1503 16 30 16C17.8497 16 8 25.8497 8 38L52 38Z" stroke="rgba(20, 20, 20, 1)" stroke-width="1" >
</path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 282 B

miniprogram/components/shape-card-v1/shape-card copy.less
+57
View File
@@ -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);
}
}
}
miniprogram/components/shape-card-v1/shape-card.json
+7
View File
@@ -0,0 +1,7 @@
{
"component": true,
"styleIsolation": "apply-shared",
"usingComponents": {
"van-icon": "@vant/weapp/icon/index"
}
}
miniprogram/components/shape-card-v1/shape-card.less
+58
View File
@@ -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);
}
}
}
miniprogram/components/shape-card-v1/shape-card.ts
+36
View File
@@ -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 });
},
},
});
miniprogram/components/shape-card-v1/shape-card.wxml
+19
View File
@@ -0,0 +1,19 @@
<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.less
+29 -44
View File
@@ -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);
}
}
miniprogram/components/shape-card/shape-card.ts
+41 -5
View File
@@ -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 = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">${coloredSvg}</svg>`;
// 转换为 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 });
miniprogram/components/shape-card/shape-card.wxml
+12 -17
View File
@@ -1,19 +1,14 @@
<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>
<image src="{{ svgDataUri }}" class="shape-card-img" mode="aspectFit" />
<view class="divider" />
<view
class="shape-color"
style="background-color: {{ color }}"
bind:tap="onColorTap" />
<van-icon
class-prefix="toy-icon"
name="error-o"
custom-class="delete-icon"
size="48rpx"
bind:tap="onDelete" />
</view>
miniprogram/constants/shapes.ts
+136 -40
View File
@@ -1,57 +1,153 @@
/**
* 钝角三角形
* <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
<polygon points="20,20 80,80 35,65" stroke="#141414" stroke-width="1" fill="#ff0000"/>
</svg>
*
*/
const SHAPES = [
// 三角形
{
id: 'obtuse-triangle',
name: '钝角三角形',
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"/>',
drawFunction: 'drawTriangle',
},
{
id: 'right-triangle',
name: '直角三角形',
type: 'triangle',
svg: '<polygon points="15,15 15,85 85,85" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
drawFunction: 'drawTriangle',
},
{
id: 'acute-triangle',
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"/>',
drawFunction: 'drawTriangle',
},
// 四边形
{
id: 'square',
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"/>',
drawFunction: 'drawSquare',
},
{
id: 'rectangle',
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"/>',
drawFunction: 'drawRectangle',
},
{
id: 'rectangle',
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"/>',
drawFunction: 'drawParallelogram',
},
{
id: 'parallelogram',
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"/>',
drawFunction: 'drawParallelogram',
},
{
id: 'trapezoid',
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"/>',
drawFunction: 'drawTrapezoid',
},
// 五边形
{
id: 'pentagon',
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"/>',
drawFunction: 'drawHexagon',
},
// 六边形
{
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"/>',
drawFunction: 'drawHexagon',
},
// 五角星
{
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"/>',
drawFunction: 'drawPentagram',
},
// 心形
{
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"/>',
drawFunction: 'drawHeart',
},
// 圆形
{
id: 'circle',
name: '圆形',
img: '/assets/shapes/circle.webp',
color: '#FF0000',
type: 'circle',
svg: '<circle cx="50" cy="50" r="40" stroke="#333" stroke-width="2" fill="none"/>',
svg: '<circle cx="50" cy="50" r="36" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
drawFunction: 'drawCircle',
},
// 椭圆
{
id: 'square',
name: '正方形',
img: '/assets/shapes/square.webp',
color: '#0000FF',
type: 'rect',
svg: '<rect x="10" y="10" width="80" height="80" stroke="#333" stroke-width="2" fill="none"/>',
drawFunction: 'drawSquare',
},
{
id: 'circle2',
name: '圆形',
img: '/assets/shapes/circle2.svg',
color: '#FF0000',
id: 'ellipse',
name: '椭圆',
type: 'circle',
svg: '<circle cx="50" cy="50" r="40" stroke="#333" stroke-width="2" fill="none"/>',
drawFunction: 'drawCircle',
svg: '<ellipse cx="50" cy="50" rx="40" ry="25" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
drawFunction: 'drawEllipse',
},
// 半圆
{
id: 'square',
name: '正方形',
img: '/assets/shapes/square.webp',
color: '#0000FF',
type: 'rect',
svg: '<rect x="10" y="10" width="80" height="80" stroke="#333" stroke-width="2" fill="none"/>',
drawFunction: 'drawSquare',
},
{
id: 'circle',
name: '圆形',
img: '/assets/shapes/circle.webp',
color: '#FF0000',
id: 'semicircle',
name: '半圆',
type: 'circle',
svg: '<circle cx="50" cy="50" r="40" stroke="#333" stroke-width="2" fill="none"/>',
drawFunction: 'drawCircle',
// 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"/>',
drawFunction: 'drawSemicircle',
},
// 扇形
{
id: 'square',
name: '正方形',
img: '/assets/shapes/square.webp',
color: '#0000FF',
type: 'rect',
svg: '<rect x="10" y="10" width="80" height="80" stroke="#333" stroke-width="2" fill="none"/>',
drawFunction: 'drawSquare',
id: 'sector',
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"/>',
drawFunction: 'drawSector',
},
// 圆环
{
id: 'ring',
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"/>',
drawFunction: 'drawRing',
},
];
miniprogram/pages/shape/index.less
+3 -7
View File
@@ -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;
}
}
miniprogram/pages/shape/index.wxml
+1 -2
View File
@@ -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" />