arc 渲染丢失

[mgzu]

    // 圆的的数组
    var circles = [{ "name": "FW1-01", "type": 1, "x": 0.69, "y": 0.66 },
    { "name": "FW1-02", "type": 1, "x": 0.71, "y": 0.64 },
    { "name": "FW1-03", "type": 1, "x": 0.71, "y": 0.56 },
    { "name": "FW1-04", "type": 1, "x": 0.67, "y": 0.56 },
    { "name": "FW1-05", "type": 1, "x": 0.67, "y": 0.48 },
    { "name": "FW1-06", "type": 1, "x": 0.67, "y": 0.41 },
    { "name": "FW1-07", "type": 1, "x": 0.67, "y": 0.28 },
    { "name": "FW1-08", "type": 1, "x": 0.67, "y": 0.19 },
    { "name": "FW1-09", "type": 1, "x": 0.72, "y": 0.19 },
    { "name": "FW1-10", "type": 1, "x": 0.72, "y": 0.1 },
    { "name": "FW1-11", "type": 1, "x": 0.65, "y": 0.1 }];

// 圆点配置
    function createArc(circle) {
        let cirColor;
        switch (circle.type) {
            case 1:
                cirColor = "#330099";
                break;
            case 2:
                cirColor = "#00CCFF";
                break;
            case 3:
                cirColor = "#FFFF33";
                break;
            case 4:
                cirColor = "#993300";
                break;
            default:
                console.log("类型异常");
                throw new TypeError('TypeError in createArc');
        }
        const arc = stage.graphs.arc({
            x: (circle.x * stage.width).toFixed(1) + 100,
            y: (circle.y * stage.height).toFixed(1) + 100,
            radius: 5,
            color: cirColor,
            style: 'fill'
        }).on('mouseenter', function () {
            tip.style.display = 'block';
            setValue({
                title: '圆点信息',
                color: cirColor,
                name: circle.name,
                type: circle.type
            });
            stage.element.style.cursor = 'pointer';
            let x = stage.utils.getPos().x - 100;
            let y = stage.utils.getPos().y;
            tip.style.left = x + 'px';
            tip.style.top = y + 'px';
        }).on('mouseleave', function () {
            tip.style.display = 'none';// 隐藏tip
            stage.element.style.cursor = 'default';
        }).on('mousedown', function () {
            tip.style.display = 'none';
            document.getElementById("name").innerHTML = circle.name;
            document.getElementById("value").innerHTML = circle.value;
            $("#circlemodel").modal('show');
            currentArc = arc;
            currentCircle = circle;
        }).config({
            drag: false,
            changeIndex: false
        });
        stage.addChild(arc);
    }

    // 画圆
    function drawArc() {
        for (let i = 0; i < circles.length; i++) {
            createArc(circles[i]);
        }
    }

这里有11条数据数据，但是 canvas 渲染后只有5个点。@PengJiyuan
案例：https://serch.gitee.io/canvas-event/examples/canvas-event.html

[mgzu]

😂看了下案例，问题解决了，是图片渲染的问题，而且 stage.graphs.image 的 zindex 配置不正确。由于图片要预加载，所以会先渲染圆点，而当图片加载后，圆点只渲染一部分，图片加载前的圆点会被覆盖，之后的则不会。

[PengJiyuan]

对 ，因为canvas的图片绘制必须要在图片load之后才可以。