Как сделать KineticJs пользовательскую форму

Question

Я пытаюсь сделать KineticJs html 5 custom shape.

Но он не работает в Google Chrome. Не перетаскиваемые в 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); 

Answer 1

Ваш скрипт содержит ошибки в нем

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

Chrome отказываются работать с перекрестными изображениями домена на Cavas.

Для перетаскивания, вам нужно добавить этот набор обводку формы

stroke: 'black', 

и в конце drawFunc

canvas.fillStroke(this); 

Вот моя рабочая версия от вашей

http://jsfiddle.net/W7SGT/

Answer 2

Вы должны использовать средство рендеринга холста при создании пользовательского в KienticJS, иначе он не сможет обработать события на фигуре. Вот учебник по пользовательских форм:

http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-shape-tutorial/

вы также можете взглянуть на форму Kinetic.Image, чтобы увидеть, как она обрабатывает изображения конкретно:

https://github.com/ericdrowell/KineticJS/blob/master/src/shapes/Image.js