ionic实现转盘抽奖-画布绘制
近期有幸接触了ionic,做一个抽奖转盘的界面,因为采用的是前后端分离的状态,并且奖品的内容需要实时的更换,所以需要制作一个灵活的转盘,最终的结果就是下面的这样:
其中指针和后面点状的都是固定的图片.需要根据奖品的个数和内容可以随意更换上转盘上的奖品内容.所以会涉及到今天说的–画布绘制.同时会用到一些jquery的知识.因为界面在一开始的时候就要加载完成,所以我们将所有的方法放到ionic TS文件中的ionViewDidLoad(){}方法中,这样在页面加载的就可以完成画布的绘制.
第一步:声明变量
需要用到的变量不是很多.
var turnplate={
// restaraunts:[], //大转盘奖品名称
colors:[], //大转盘奖品区块对应背景颜色
outsideRadius:192, //大转盘外圆的半径
textRadius:155, //大转盘奖品位置距离圆心的距离
insideRadius:68, //大转盘内圆的半径
startAngle:0, //开始角度
};
}
第二步:设置要添加的内容和转盘的背景颜色
//动态添加大转盘的奖品与奖品区域背景颜色
turnplate.restaraunts = ["大娃:力大无穷", "二娃:千里眼顺风耳", "三娃:金钢不坏", "四娃:火之子", "五娃:水之子", "六娃:隐身娃", "七娃:我有宝葫芦 ", "蛇精:叫我女王", "蝎子精:宝贝,哪跑", "爷爷:快来抓我"];
turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#DDDDDD","#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6", "#FFFFFF"];
第三步:这是绘制画布和ionic交互最重要的地方
var canvas = document.getElementById("g-lottery")as HTMLCanvasElement;
其中(‘g-lottery’)是图片的一个id
在HTML中这样显示
<div class="turnplate" style="background-image:url('assets/imgs/turnplate-bg.png');background-size:100% 100%;">
<canvas class="item" id="g-lottery" width="422px" height="422px"></canvas>
<img class="pointer" src="assets/imgs/turnplate-pointer.png" (click)="spin()"/>
</div>
第四步:绘制的细节
接下来就是画布绘制最核心的部分代码
//根据奖品个数计算圆周角度
var arc = Math.PI / (this.newList.length/2);
var ctx = canvas.getContext("2d");
ctx.strokeStyle = "#FFBE04";//设置字体的颜色
ctx.font = '16px Microsoft YaHei';//设置字体的样式
for(var i = 0; i < this.newList.length; i++) {
var angle = turnplate.startAngle + i * arc;
ctx.fillStyle = turnplate.colors[i];
ctx.beginPath();
//arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线(用于创建圆或部分圆)
ctx.arc(211, 211, turnplate.outsideRadius, angle, angle + arc, false);
ctx.arc(211, 211, turnplate.insideRadius, angle + arc, angle, true);
ctx.stroke();
ctx.fill();
//锁画布(为了保存之前的画布状态)
ctx.save();
第四步:设置要添加的内容和转盘的背景颜色
public class zhiwei(){
//我是职位1
}
第五步:开始填充画布
加下来开始将画布上的内容丰富.
//----绘制奖品开始----
ctx.fillStyle = "#E5302F";
var text = this.newList[i];
var line_height = 17;
//translate方法重新映射画布上的 (0,0) 位置
ctx.translate(211 + Math.cos(angle + arc / 2) * turnplate.textRadius, 211 + Math.sin(angle + arc / 2) * turnplate.textRadius);
/** 下面代码根据奖品类型、奖品名称长度渲染不同效果,如字体、颜色、图片效果。(具体根据实际情况改变) **/
if(text.indexOf("M")>0){//流量包
var texts = text.split("M");
for(var j = 0; j<texts.length; j++){
ctx.font = j == 0?'bold 20px Microsoft YaHei':'16px Microsoft YaHei';
if(j == 0){
ctx.fillText(texts[j]+"M", -ctx.measureText(texts[j]+"M").width / 2, j * line_height);
}else{
ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
}
}
}else if(text.indexOf("M") == -1 && text.length>6){//奖品名称长度超过一定范围
text = text.substring(0,6)+"||"+text.substring(6);
var texts = text.split("||");
for(var j = 0; j<texts.length; j++){
ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
}
}else{
//在画布上绘制填色的文本。文本的默认颜色是黑色
//measureText()方法返回包含一个对象,该对象包含以像素计的指定字体宽度
ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
}
第六步:收尾工作
如果昨晚了前面的内容会发现转盘上每个奖项的位置会乱
就像下面这样:
所以不能遗忘这最后的一步.
ctx.restore();
这样整个过程就全部结束了~
最后转盘也会展示出来: