如何制作KineticJs自定义形状

我想制作KineticJs html 5自定义形状。如何制作KineticJs自定义形状

但它不适用于谷歌浏览器。在Firefox中不可拖动，并且形状大小也不相同。

有人可以说明原因吗？

活码http://jsfiddle.net/prantor19/wGE2a/8/

var stage = new Kinetic.Stage({ 
    container: 'canvas-container', 
    width: 500, 
    height: 500, 
}); 

var layer = new Kinetic.Layer(); 

drawWindow = function(canvas) { 
    var context = canvas.getContext(); 
    context.beginPath(); 
    context.moveTo(this.attrs.x,this.attrs.y); 
    context.lineTo(this.attrs.width,this.attrs.y); 
    context.lineTo(this.attrs.width,this.attrs.height); 
    context.lineTo(this.attrs.x,this.attrs.height); 
    context.closePath(); 
    context.clip(); 
    context.drawImage(img,this.attrs.img_x,this.attrs.img_y); 
} 

img = document.createElement('img'); 
img.src= "http://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Nature_reserve_Kladrubska_hora_in_summer_2011_(17).JPG/1024px-Nature_reserve_Kladrubska_hora_in_summer_2011_(17).JPG"; 

var window1 = new Kinetic.Shape({ 
    drawFunc: drawWindow, 
    x: 0, 
    y: 0, 
    width: 100, 
    height: 100, 
    img:img, 
    img_x:0, 
    img_y:0, 
    draggable: true 
}); 

var window2 = new Kinetic.Shape({ 
    drawFunc: drawWindow, 
    x: 10, 
    y: 60, 
    width: 100, 
    height: 100, 
    img:img, 
    img_x:-250, 
    img_y:0, 
    draggable: true 
}); 

pointercursor = function() { 
    document.body.style.cursor = 'pointer'; 
} 
defaultCursor = function() { 
    document.body.style.cursor = 'default'; 
} 

window1.on('mouseover',pointercursor); 
window1.on('mouseout', defaultCursor); 
window2.on('mouseover',pointercursor); 
window2.on('mouseout', defaultCursor); 

layer.add(window1); 
layer.add(window2); 

stage.add(layer);

来源

2013-03-06 Arif

，你还需要一个drawHitFunc，而不仅仅是一个drawFunc。我认为。但是，请参阅html5canvastutorials.com上的自定义形状教程。 – SoluableNonagon 2013-03-06 21:31:48

您的脚本中有错误

Unable to get image data from canvas because the canvas has been tainted by cross-origin data. kinetic-v4.3.2-beta.js:4365 Uncaught Error: SecurityError: DOM Exception 18

铬拒绝与卡瓦酒跨域图像工作。

对于拖动，你需要添加这套行程的形状