135 lines
5.2 KiB
JavaScript
135 lines
5.2 KiB
JavaScript
// shapes.js - 幼儿园到小学三年级基本几何形状定义
|
|
const shapes = [
|
|
{
|
|
id: 'circle',
|
|
name: '圆形',
|
|
type: 'circle',
|
|
svg: '<circle cx="50" cy="50" r="40" stroke="#333" stroke-width="2" fill="none"/>',
|
|
drawFunction: 'drawCircle',
|
|
},
|
|
{
|
|
id: 'square',
|
|
name: '正方形',
|
|
type: 'rect',
|
|
svg: '<rect x="10" y="10" width="80" height="80" stroke="#333" stroke-width="2" fill="none"/>',
|
|
drawFunction: 'drawSquare',
|
|
},
|
|
{
|
|
id: 'rectangle',
|
|
name: '长方形',
|
|
type: 'rect',
|
|
svg: '<rect x="5" y="25" width="90" height="50" stroke="#333" stroke-width="2" fill="none"/>',
|
|
drawFunction: 'drawRectangle',
|
|
},
|
|
{
|
|
id: 'triangle',
|
|
name: '三角形',
|
|
type: 'triangle',
|
|
svg: '<polygon points="50,10 20,80 80,80" stroke="#333" stroke-width="2" fill="none"/>',
|
|
drawFunction: 'drawTriangle',
|
|
},
|
|
{
|
|
id: 'oval',
|
|
name: '椭圆形',
|
|
type: 'oval',
|
|
svg: '<ellipse cx="50" cy="50" rx="40" ry="25" stroke="#333" stroke-width="2" fill="none"/>',
|
|
drawFunction: 'drawOval',
|
|
},
|
|
{
|
|
id: 'diamond',
|
|
name: '菱形',
|
|
type: 'diamond',
|
|
svg: '<polygon points="50,10 80,50 50,90 20,50" stroke="#333" stroke-width="2" fill="none"/>',
|
|
drawFunction: 'drawDiamond',
|
|
},
|
|
{
|
|
id: 'star',
|
|
name: '星形',
|
|
type: 'star',
|
|
svg: '<polygon points="50,5 60,35 90,35 70,55 80,85 50,70 20,85 30,55 10,35 40,35" stroke="#333" stroke-width="2" fill="none"/>',
|
|
drawFunction: 'drawStar',
|
|
},
|
|
{
|
|
id: 'heart',
|
|
name: '心形',
|
|
type: 'heart',
|
|
svg: '<path d="M50,85 C30,65 10,45 10,25 C10,15 20,5 30,5 C40,5 50,15 50,25 C50,15 60,5 70,5 C80,5 90,15 90,25 C90,45 70,65 50,85 Z" stroke="#333" stroke-width="2" fill="none"/>',
|
|
drawFunction: 'drawHeart',
|
|
},
|
|
{
|
|
id: 'hexagon',
|
|
name: '六边形',
|
|
type: 'hexagon',
|
|
svg: '<polygon points="25,15 75,15 90,50 75,85 25,85 10,50" stroke="#333" stroke-width="2" fill="none"/>',
|
|
drawFunction: 'drawHexagon',
|
|
},
|
|
{
|
|
id: 'pentagon',
|
|
name: '五边形',
|
|
type: 'pentagon',
|
|
svg: '<polygon points="50,10 80,35 65,75 35,75 20,35" stroke="#333" stroke-width="2" fill="none"/>',
|
|
drawFunction: 'drawPentagon',
|
|
},
|
|
{
|
|
id: 'semicircle',
|
|
name: '半圆形',
|
|
type: 'semicircle',
|
|
svg: '<path d="M 15 50 A 35 35 0 0 1 85 50 Z" stroke="#333" stroke-width="2" fill="none"/>',
|
|
drawFunction: 'drawSemicircle',
|
|
},
|
|
{
|
|
id: 'trapezoid',
|
|
name: '梯形',
|
|
type: 'trapezoid',
|
|
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',
|
|
},
|
|
];
|
|
|
|
// 颜色选项
|
|
const colors = [
|
|
{ name: '红色', value: '#FF4444' },
|
|
{ name: '蓝色', value: '#4A90E2' },
|
|
{ name: '绿色', value: '#7ED321' },
|
|
{ name: '黄色', value: '#F5A623' },
|
|
{ name: '紫色', value: '#9013FE' },
|
|
{ name: '橙色', value: '#FF8F00' },
|
|
{ name: '粉色', value: '#E91E63' },
|
|
{ name: '青色', value: '#00BCD4' },
|
|
{ name: '深绿', value: '#4CAF50' },
|
|
{ name: '深蓝', value: '#2196F3' },
|
|
{ name: '棕色', value: '#8D6E63' },
|
|
{ name: '灰色', value: '#9E9E9E' },
|
|
];
|
|
|
|
export { shapes, colors };
|