對象，出現外父層

對我期望層之外的對象（由COORDS X和ÿ）不會顯示父層，或畫布上，但它似乎 - 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);

來源

2013-09-05 shark255

不幸的是，這就是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

來源

2013-09-05 14:14:47 projeqht

對象，出現外父層

回答

相關問題