182 lines
6.5 KiB
TypeScript
182 lines
6.5 KiB
TypeScript
/**
|
|
* 钝角三角形
|
|
* <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>
|
|
*
|
|
*/
|
|
|
|
interface ShapeCard {
|
|
id: string;
|
|
name: string;
|
|
type: string;
|
|
svg: string;
|
|
svgDataUrl?: string;
|
|
fillColor: string;
|
|
drawFunction?: string;
|
|
checked?: boolean;
|
|
checkedDisabled?: boolean;
|
|
}
|
|
|
|
const SHAPES: ShapeCard[] = [
|
|
// 三角形
|
|
{
|
|
id: 'obtuse-triangle',
|
|
name: '钝角三角形',
|
|
type: 'triangle',
|
|
svg: '<polygon points="15,15 85,85 20,70" stroke="#141414" stroke-width="1" fill="transparent"/>',
|
|
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="transparent"/>',
|
|
fillColor: '#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="transparent"/>',
|
|
fillColor: '#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="transparent"/>',
|
|
fillColor: '#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="transparent"/>',
|
|
fillColor: '#ff0000',
|
|
drawFunction: 'drawRectangle',
|
|
},
|
|
{
|
|
id: 'parallelogram',
|
|
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="transparent"/>',
|
|
fillColor: '#ff0000',
|
|
drawFunction: 'drawParallelogram',
|
|
},
|
|
{
|
|
id: 'diamond',
|
|
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="transparent"/>',
|
|
fillColor: '#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="transparent"/>',
|
|
fillColor: '#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="transparent"/>',
|
|
fillColor: '#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="transparent"/>',
|
|
fillColor: '#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="transparent"/>',
|
|
fillColor: '#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="transparent"/>',
|
|
fillColor: '#ff0000',
|
|
drawFunction: 'drawHeart',
|
|
},
|
|
// 圆形
|
|
{
|
|
id: 'circle',
|
|
name: '圆形',
|
|
type: 'circle',
|
|
svg: '<circle cx="50" cy="50" r="36" stroke="#141414" stroke-width="1" fill="transparent"/>',
|
|
fillColor: '#ff0000',
|
|
drawFunction: 'drawCircle',
|
|
},
|
|
// 椭圆
|
|
{
|
|
id: 'ellipse',
|
|
name: '椭圆',
|
|
type: 'circle',
|
|
svg: '<ellipse cx="50" cy="50" rx="40" ry="25" stroke="#141414" stroke-width="1" fill="transparent"/>',
|
|
fillColor: '#ff0000',
|
|
drawFunction: 'drawEllipse',
|
|
},
|
|
// 半圆
|
|
{
|
|
id: 'semicircle',
|
|
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="transparent"/>',
|
|
fillColor: '#ff0000',
|
|
drawFunction: 'drawSemicircle',
|
|
},
|
|
// 扇形
|
|
{
|
|
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="transparent"/>',
|
|
fillColor: '#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="transparent" fill-rule="evenodd" stroke="#141414" stroke-width="1"/>',
|
|
fillColor: '#ff0000',
|
|
drawFunction: 'drawRing',
|
|
},
|
|
];
|
|
|
|
export { SHAPES, ShapeCard }; |