使用SVG绘制圆形、扇形、文字实现转盘抽奖效果

程序员文章站 2022-05-26 23:54:15

...

效果图如下：

思路：

1.先引入SVG

<!--html-->
<!--因为转盘中的文字及奖品个数都是动态的，所以在js中生成svg字符串，利用vue的v-html渲染到页面-->
<svg width="100%" height="100%" version="1.1"  xmlns="http://www.w3.org/2000/svg" v-html="svgStr">

2.画出最外层的圆

//js
//因为圆心在（150，150），且半径为150，所以整个画布为300*300
this.svgStr=“<circle cx="150" cy="150" r="150" stroke-width="2" fill="#C13820"/>”

3.画出扇形及文字

let color = index % 2 == 0 ? 'white' : '#FEF6E1';//扇形的颜色，白黄（#FEF6E1）相间
//path绘制扇形，foreignObject绘制文字,也可以用text绘制文字，但是text的话，无法自动换行
//（150，150）是扇形的圆心，扇形半径为130，所以才会有一个红色的圆圈，rotateDeg是根据奖项的数量算出来的扇形圆心角度数
//（x1,y1）,（x2,y2）是根据扇形的圆心坐标，rotateDeg和扇形半径算出来扇形的另外两个点坐标，利用正弦余弦函数
//再配合transform的rotate属性就可以实现多个扇形组成一个圆
this.svgStr+=`<path d="M150 150 L${x1} ${y1} A130 130 0 0 0 ${x2} ${y1} Z"//A控制圆弧的走向
   stroke-width="2" 
   fill="${color}"
   transform="rotate(${rotateDeg})" 
   transform-origin="150 150"
   index=${index}
 />
 <foreignObject width="${this.base *1.1}" 
   height="50" x="${wordX}" y="30"
   text-anchor="middle"
   transfom="rotate(${rotateDeg})"
   transform-origin="150 150">
   <body xmlns="http://www.w3.org/1999/xhtml">
     <p style="font-size:16px;margin:0;color:#C93E2C">${item.name}</p>
   </body>
 </foreignObject>
`

不明白psth的用法，可以参考链接：https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Paths

讲的很详细，不再赘述。