0

I expect that objects outside of layer (by coords x and y) will not show on parent layer, or canvas, but it appears - http://clip2net.com/s/5HbVnf .

According to my link "777" text belongs to red layer, but appears on green layer, if i set it Y coord to -25 for example.

How to resolve this issue ?

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

1 回答 1

0

不幸的是，这就是 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()功能：检查文档

jsfiddle

于 2013-09-05T14:14:47.310 回答