Kineticjs 캐시 표시가 잘못되었습니다. 오프셋 사용시 도형 크기

Question

오프셋 옵션을 사용하여 Kinetic.Image를 만들고 있습니다. 이미지 개체를 캐시하고 레이어 그리기 메서드를 호출하면 키네틱이 잘못된 이미지 크기를 표시합니다.

Kinetic.Shape.prototype._useBufferCanvas = function() { 
    return false; 
}; 

var stage = new Kinetic.Stage({ 
    container: 'container', 
    width: window.innerWidth, 
    height: window.innerHeight, 
    draggable: true 
}); 
var layer = new Kinetic.Layer(); 
stage.add(layer); 

var img = new Image(); 
img.onload = function() { 
    var sticker = new Kinetic.Image({ 
    x: window.innerWidth/2, 
    y: window.innerHeight/2, 
    image: img, 
    width: img.width, 
    height: img.height, 
    offset: { 
     x: img.width/2, 
     y: img.height/2 
    }, 
    draggable: true 
    }); 

    layer.add(sticker); 
    stage.add(layer); 

    sticker.cache(); 
    layer.draw(); 

    sticker.filters([Kinetic.Filters.HSL]); 
    sticker.hue(100); 
    sticker.saturation(0); 
    sticker.luminance(1); 

    layer.draw(); 
}; 

img.src = 'http://img3.wikia.nocookie.net/__cb20120328033042/marioparty/es/images/7/7d/MP9_Select_Wario.png'; 

http://jsfiddle.net/ilumin/UbdW2/18/

나는 >>이 솔루션처럼 kineticjs group cache and layer draw is hiding kinetic arc shapes

을 메서드를 재정의하려고하지만 여전히 작동하지.

Answer 1

해결책을 찾았습니다!
이미지 개체의 그룹 개체가 사용됩니다.

var sticker = new Kinetic.Image({ 
    image: img, 
    x: 0, y: 0, 
    width: img.width, height: img.height 
}); 

var group = new Kinetic.Group({ 
    x: window.innerWidth/2, y: window.innerHeight/2, 
    width: img.width, height: img.height, 
    offset: { x: img.width/2, y: img.height/2 }, 
    draggable: true 
}); 

group.add(sticker); 
layer.add(group);