用canvas画图移动组件那边实现,就变空白显示不出来了?
发布于 6 年前 作者 skang 12854 次浏览 来自 官方Issues

已经修改了,有人帮忙看一下哪里还有哪里需要修改吗:

var context = wx.createCanvasContext(id, this);

代码:

bloodChart: function (arry, id) {

var allnum = this.data.allnum;

var that = this;

//var context = wx.createContext();

var context = wx.createCanvasContext(id, this);

//获取画布大小

var conW = arry.conW || 170,

conH = arry.conH || 170;

conW = that.data.windowW * conW / 750;

conH = that.data.windowW * conH / 750;

var point = {

x: conW / 2,

y: conH / 2

};

var end = arry.pieNumber;

//if(){}

//画一个弧度

context.beginPath();

//1.先做第一个pie  

//2.画一条弧,并填充成三角饼pie,前2个参数确定圆心,第3参数为半径,第4参数起始旋转弧度数,第5参数本次扫过的弧度数,第6个参数为时针方向-false为顺时针

// 逆时针旋转 90度 (+1.5*Math.PI);

context.arc(point.x, point.y, that.data.windowW * arry.radius[1] / 750, 0 + 0.5 * Math.PI, (end / allnum * 2 * Math.PI) + 0.5 * Math.PI, false);

//      3.连线回圆心  

context.lineTo(point.x, point.y);

//      4.填充样式  

context.setFillStyle(arry.color);

//      5.填充动作  

context.fill();

context.closePath();

//画个灰弧形

context.beginPath();

context.setFillStyle(’#f3f3f3’);

context.arc(point.x, point.y, that.data.windowW * (arry.radius[1] + 1) / 750, (end / allnum * 2 * Math.PI) + 0.5 * Math.PI, 2 * Math.PI + 0.5 * Math.PI, false);

context.fill();

context.closePath();

//画个空白圆

context.beginPath();

context.setFillStyle(’#ffffff’);

context.arc(point.x, point.y, that.data.windowW * arry.radius[0] / 750, 0, 2 * Math.PI, false);

context.fill();

context.closePath();

//填写文字

var numL = String(end).length;

//写数字

context.translate(that.data.windowW / 750 * ((numL * 60 + 20) / 6), 0);

context.beginPath();

context.setFontSize(that.data.windowW * 60 / 750);

context.setTextAlign(‘right’);

context.setTextBaseline(‘middle’);

context.setFillStyle(arry.color);

context.fillText(end, point.x, point.y);

context.closePath();

//学单位

context.beginPath();

context.setFontSize(that.data.windowW * 28 / 750);

context.setTextAlign(‘left’);

context.setTextBaseline(‘bottom’);

context.setFillStyle(’#000000’);

context.fillText(‘次’, point.x, point.y + that.data.windowW * 20 / 750);

context.closePath();

//指定canvasId,canvas 组件的唯一标识符  

wx.drawCanvas({

canvasId: id,

actions: context.getActions()

});

},

1 回复

可以给全吗? wxml js ,可以帮你测一下…

回到顶部