组件component二次开发属性暴露，跟渲染元素属性暴露类似，但主要是canvas画笔来绘制组件图形

最新推荐文章于 2024-08-12 13:45:33 发布

IOTOS

最新推荐文章于 2024-08-12 13:45:33 发布

阅读量239

点赞数

本文链接：https://blog.csdn.net/IOTOS/article/details/127102647

版权

ht for web深度开发实践专栏收录该内容

63 篇文章 36 订阅

订阅专栏

参见如下典型的组件绘制代码，comp.getValue()就是获取组件的动态属性参数即暴露出来的变量！

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();