Question

我希望图层外的对象（通过coords x 和 y ）不会显示在父图层或画布上，但会显示 - http://clip2net.com/s/5HbVnf。

根据我的链接“777”文字属于红色图层，但是如果我将Y坐标设置为-25，则显示在绿色图层上。

如何解决此问题？

var layer = new Kinetic.Layer({
    width: 300,
    height: 300
});

var text_layer = new Kinetic.Layer({
    x:150,
    y:50,
    width: 100,
    height: 100
});

var red_rect = new Kinetic.Rect({
    width: 100,
    height: 100,
    fill: 'red',
    stroke: 'black',
    strokeWidth: 4
});

var text = new Kinetic.Text({
    x: 5,
    y: -25,
    text: '777',
    fontSize: 30,
    fontFamily: 'Calibri',
    fill: 'black'
});

text_layer.add(red_rect);
text_layer.add(text);

stage.add(layer);
stage.add(text_layer);

Answer 1

不幸的是，这就是KineticJS图层默认工作的方式。

好消息是，您可以使用clip属性通过剪切layer之外的区域来解决您的问题。

剪辑教程：http://www.html5canvastutorials.com/kineticjs/html5-canvas-clipping-functions-with-kineticjs/

要使用KineticJS在剪辑区域内绘制内容，我们可以设置任何容器的剪辑属性，包括组，图层或舞台。剪切区域由x，y，宽度和高度定义。

var text_layer = new Kinetic.Layer({
    x: 150,
    y: 50,
    width: 100,
    height: 100,
    clip: [0, 0, 100, 100] //x,y,width,height
});

或者您可以使用setClip()功能：查看docs

jsfiddle

属于图层的对象显示在父图层外部

1 个答案: