参见如下典型的组件绘制代码,comp.getValue()就是获取组件的动态属性参数即暴露出来的变量!
![](https://i-blog.csdnimg.cn/blog_migrate/5b2475a61fb90101816f7d798c5d7ba5.png)
components/demo/progressBar/circleProgressBar.json
JavaScript // * 创建渐变背景色 function addCreateLinear(colorsArr) { var linear = rectWidth < rectHeight ? g.createLinearGradient(0, posY - width / 2, width, posY + width / 2) : g.createLinearGradient(posX - width / 2, 0, posX + width / 2, width); var len = colorsArr.length; for (var key in colorsArr) { linear.addColorStop((+key + 1) / len, colorsArr[key]); } return linear; }
// * 获取属性值 var rectWidth = rect.width; var rectHeight = rect.height; var width = rectWidth < rectHeight ? rectWidth : rectHeight; var progressPercentage = parseFloat((comp.getValue('progressPercentage') * 100).toFixed(10)); var fontScale = comp.getValue('fontScale'); var showOrigin = comp.getValue('showOrigin'); var progressLineCap = comp.getValue('progressLineCap'); var fontSize = 16;
// * 定义属性值 var posX = rectWidth / 2; var posY = rectHeight / 2; var circleLineWidth = width / 10; var circleRadius = (width - circleLineWidth) / 2; var circleAngle = { sAngle: 0, eAngle: 2 * Math.PI };
//原先是Math.PI,发现是左边水平开始旋转,改成从上顶部开始旋转,不过始 //终还没解决如果是两个渐变色,如何100%的时候才刚好实现渐变完成,这样油表颜色一样阶段变化? var proStartAngel = -Math.PI / 2;
var proEndAngel = proStartAngel + ((Math.PI * 2) / 100) * progressPercentage;
// * 创建渐变填充颜色 var linearOuter = addCreateLinear(comp.getValue('linearOuter')); var linearInner = addCreateLinear(comp.getValue('linearInner'));
// * 0.保存绘制前状态 g.save();
// * 1.背景圆 g.beginPath(); g.arc(posX, posY, circleRadius, circleAngle.sAngle, circleAngle.eAngle); g.closePath(); g.fillStyle = comp.getValue('innerBackground'); g.fill(); g.lineWidth = circleLineWidth; g.strokeStyle = comp.getValue('outerDefaultColor'); g.stroke();
// * 2.进度环 g.beginPath(); g.arc(posX, posY, circleRadius, proStartAngel, proEndAngel); g.strokeStyle = linearOuter; g.lineCap = progressLineCap; if (progressPercentage !== 0) g.stroke();
// * 3.绘制中心圆 g.beginPath(); g.fillStyle = linearInner; g.arc( posX, posY, circleRadius - circleLineWidth / 2, 0, Math.PI * 2, false ); g.strokeStyle = comp.getValue('innerGapColor'); g.fill(); let gapwidth = comp.getValue('innerGapWidth'); g.lineWidth = gapwidth == 0 ? 0 : gapwidth if(gapwidth > 0){ g.stroke(); }
// * 4.绘制文字 g.fillStyle = 'white'; g.textAlign = 'center'; g.font = fontSize + 'px Arial'; g.translate(posX * (1 - fontScale), posY * (1 - fontScale)); g.scale(fontScale, fontScale); showOrigin ? g.fillText(progressPercentage / 100, posX, posY + fontSize / 3) : g.fillText(progressPercentage + '%', posX, posY + fontSize / 3);
// * 5.恢复绘制前状态 g.restore(); |