zrender icon indicating copy to clipboard operation
zrender copied to clipboard

请问在zrender.Line中设置z:-1 为啥线还是在其他元素上面。

Open shawnXHC opened this issue 3 years ago • 6 comments

shawnXHC avatar Mar 08 '21 06:03 shawnXHC

这些元素都是被添加到一个group中的

shawnXHC avatar Mar 08 '21 06:03 shawnXHC

提供一下例子?

pissang avatar Mar 08 '21 08:03 pissang

    var zr = zrender.init(document.getElementById('main'));
    var group = new zrender.Group()
    var line = new zrender.Line({
        shape: {
            x1: 70,
            y1: 0,
            x2: 70,
            y2: 600,
        },
        z: -1
    });

    var image = new zrender.Image({
        style: {
            image: 'asset//hahah.svg',
            x: 50,
            y: 50,
        }
    })

    group.add(line)
    group.add(image)
    zr.add(group);

`

实际效果 image

shawnXHC avatar Mar 09 '21 06:03 shawnXHC

@shawnXHC 应该是视觉错觉,我这边的运行结果没问题。

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

var group = new zrender.Group()
var line = new zrender.Line({
    shape: {
        x1: 70,
        y1: 0,
        x2: 70,
        y2: 600,
    },
    z: -1
});

var image = new zrender.Image({
    style: {
        image: 'https://iconfont.alicdn.com/t/3c0f2c09-452c-49cd-852d-8f0a66873abe.png',
        x: 0,
        y: 50,
    }
})

group.add(line)
group.add(image)
zr.add(group)

image

beetaa avatar May 31 '21 12:05 beetaa

@shawnXHC 应该是视觉错觉,我这边的运行结果没问题。


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



var group = new zrender.Group()

var line = new zrender.Line({

    shape: {

        x1: 70,

        y1: 0,

        x2: 70,

        y2: 600,

    },

    z: -1

});



var image = new zrender.Image({

    style: {

        image: 'https://iconfont.alicdn.com/t/3c0f2c09-452c-49cd-852d-8f0a66873abe.png',

        x: 0,

        y: 50,

    }

})



group.add(line)

group.add(image)

zr.add(group)

image

您试下用SVG图片

shawnXHC avatar Jun 01 '21 00:06 shawnXHC

@shawnXHC 是因为这个 svg 图片底下是透明的吧。所以能看到底下的线

pissang avatar Jun 01 '21 05:06 pissang