zrender

zrender copied to clipboard

var showAndExp;
var allKindsOfTag;
var showInner;
var zr;

window.onload = function () {
    var showAndExp = document.querySelector(".showAndExp");
    var allKindsOfTag = document.querySelector(".allKindsOfTag");
    allKindsOfTag.hidden = true;//默认不显示
    var showInner = document.getElementById("showInner");

    zr = zrender.init(document.getElementById("canvas"), {
        renderer:'canvas',
        width:1070,
        height:600,
    });
    Border();
    // zr.on('click',Border)
    showAndExp.addEventListener("change",function () {
        let currentState = showAndExp.value;
        if(currentState === "演示"){
            allKindsOfTag.hidden = false;
        }
        else if(currentState === "实验"){
            allKindsOfTag.hidden = false;
        }
    })
    allKindsOfTag.addEventListener("change",function () {
        let currentStatus = showAndExp.value;
        let currentTag = allKindsOfTag.value;
        if( currentStatus === "演示"){
            if(currentTag === "智能标签") {
                zrDrawSmartTag();
            }
        }
    })

    // 鼠标放置逻辑


    //外框
    function Border(){
        // const Rec = new zrender.Polyline({
        const Rec = new zrender.Rect({
            shape:{
                // points: [[0,0],[1070,0],[1070,600],[0,600],[0,0]]
                x:0,y:0,
                width:1070,
                height:600,
                r:[10,10,10,10]
            },
            style:{
                fill:"rgb(201,198,198)",
                lineWidth:5,
                stroke:"#005bc3",
            }
        })
        zr.add(Rec);

    }



    // 未填充圆矩形
    var RoundedRect = zrender.Path.extend({
        type:'roundRect',
        shape:{
            x:0,
            y:0,
            width:0,
            height:0,
            radius:0,

        },
        buildPath:function (path,shape) {
            var width = shape.width;
            var  height = shape.height;
            var radius = shape.radius;
            var x = shape.x;
            var y = shape.y;
            var A = [x,y,x,y + radius,x - radius,y + radius];
            var B = [x + width,y,x + width,y + radius,x + width +radius,y + radius];
            var C = [x + width,y + height + radius * 2,x + width,y + height + radius,x + width + radius, y + height + radius];
            var D = [x,y + 2 * radius + height,x,y + height + radius,x - radius, y + height + radius];

            // AB
            path.lineWidth = 10;
            path.moveTo(A[0],A[1]);
            path.lineTo(B[0],B[1]);
            // ∠B
            path.arc(B[2],B[3],radius,(Math.PI * 3)/ 2,0,false);
            // BC
            path.moveTo(B[4],B[5]);
            path.lineTo(C[4],C[5]);
            // ∠C
            path.arc(C[2],C[3],radius,0,Math.PI / 2,false);
            // CD
            path.moveTo(C[0],C[1]);
            path.lineTo(D[0],D[1]);
            // ∠D
            path.arc(D[2],D[3],radius,Math.PI / 2,Math.PI,false);
            // DA
            path.moveTo(D[4],D[5]);
            path.lineTo(A[4],A[5]);
            // ∠A
            path.arc(A[2],A[3],radius,Math.PI,(Math.PI * 3) / 2,false);
        },
        style:{
            stroke:"#3708e2",
            draggable:true,
            fill:"#fff",
            lineWidth:5,
            rectHover:true,
        }

    });
    // 线圈
    var Coil = zrender.Path.extend({
        type:'coil',
        shape:{

        }
    })


    // 画智能标签
    function zrDrawSmartTag(){

        const Inlay = new zrender.Rect({
            shape:{
                r:5,
                x:235,
                y:225,
                width:600,
                height:150
            },
            style:{
                fill:"rgb(255, 255 , 255)",
            },
            // rotation:-6* Math.PI/180,
        });

        const coilS = new zrender.Polyline({
            shape:{
                fill:"rgb(51,51,51)",
                points:[[437.5,260],[602.5,260],[602.5,300],[437.5,300],[437.5,260]],
                smooth:0,
            }

            },
        );

        const chip1 = new zrender.Rect({
            shape: {
                r: 6,
                x: 250,
                y: 240,
                width: 120,
                height: 120,
            },
            style: {
                fill: "rgb(68, 68, 68)",
            }
        });
        const chip2 = new zrender.Rect({
            shape: {
                r: 6,
                x: 700,
                y: 240,
                width: 120,
                height: 120,
            },
            style: {
                fill: "rgb(68, 68, 68)",
            }
        });
        var rrect = new RoundedRect({
            shape:{
                x:480,
                y:275,
                width:110,
                height:40,
                radius: 5,
            }
        })

        zr.add(Inlay);
        zr.add(chip1);
        zr.add(chip2);
        // zr.add(coilS);
        zr.add(rrect);
        Inlay.on('mouseover', function () {
            zr.addHover(this, {
                stroke: 'yellow',
                opacity: 1
            });
            zr.refresh();
        });
        Inlay.on('mouseout', function () {
            zr.removeHover(this);
        });

官方的 hover layer 范例 也无效了。我自己写的代码如下也无效了。

const zr = zrender.init(document.getElementById("ok"))

const gridGroup = new zrender.Group()
const pointGroup = new zrender.Group()
zr.add(gridGroup)
zr.add(pointGroup)

const screenColumn = 15
const screenRow = 25
const tileSize = 25
const canvasWidth = screenColumn * tileSize
const canvasHeight = screenRow * tileSize
const gridColor = '#AAA'

for (let h = 0; h <= screenColumn; h++) {
    const vLine = new zrender.Line({
        shape: {
            x1: h * tileSize,
            y1: 0,
            x2: h * tileSize,
            y2: canvasHeight
        },
        silent: true
    })
    gridGroup.add(vLine)
}

for (let v = 0; v <= screenRow; v++) {
    const hLine = new zrender.Line({
        shape: {
            x1: 0,
            y1: v * tileSize,
            x2: canvasWidth,
            y2: v * tileSize
        },
        silent: true
    })
    gridGroup.add(hLine)
}

function drawTile(position = [0, 0]) {
    return new zrender.Rect({
        shape: {
            x: position[0] * tileSize,
            y: position[1] * tileSize,
            width: tileSize,
            height: tileSize
        }
    })
}

const positions = [
    [0, 0],
    [5, 3],
    [8, 9],
    [12, 6],
    [6, 18],
]

positions.forEach(position => {
    const tile = drawTile(position)

    tile.on("mousemove", function() {
        zr.addHover(this, {
            fill: "#F00"
        })
        zr.refreshHover()
    })

    tile.on("mouseout", function() {
        zr.removeHover(this)
    })

    pointGroup.add(tile)
})

运行截图，可以看到鼠标移动到方块上，高两层设置并未生效。

源码里没有定了 是不是 作废了 6427 行

        ZRender.prototype.addHover = function (el) {
        };
        ZRender.prototype.removeHover = function (el) {
        };
        ZRender.prototype.clearHover = function () {
        };

源码里被作废了

    /**     * Add element to hover layer     */    addHover(el: Displayable) {        // deprecated.    }
    /**     * Add element from hover layer     */    removeHover(el: Path | TSpan | ZRImage) {        // deprecated.    }
    /**     * Clear all hover elements in hover layer     */    clearHover() {        // deprecated.    }