Kinetic JS에서 픽셀 데이터 가져 오기 Image

Question

키네틱 JS를 사용하여 이미지를 표시하고 있으며 확대 기능을 구현하고 싶습니다.

기본적으로 마우스 포인터가 가리키고있는 이미지의 영역을 복사하고 크기를 조정 한 다음 화면의 다른 곳에 표시하고 싶습니다.

캔버스 context.getImageData() 함수로 HTML5 캔버스 픽셀 데이터를 가져올 수 있지만 Kinetic JS에서이 작업을 수행하는 다른 방법이 있습니까? 아니면 이미지의 기본 컨텍스트를 가져 와서 getImageData 함수를 사용해야합니까? getImageData 작동 있도록

감사

Answer 1

KineticJS은 일반 캔버스를 사용합니다. 원하는 컨텍스트를 잡으십시오. 당신이 무대에 더 많은 레이어를 추가하면 상황이 조금 잔재주를 얻을 그러나

$('#canvas').mousemove(function(e) { 
    var pos = findPos(this); 
    var x = e.pageX - pos.x; 
    var y = e.pageY - pos.y; 
    var coord = "x=" + x + ", y=" + y; 
    var c = this.getContext('2d'); 
    var p = c.getImageData(x, y, 1, 1).data; 
    var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6); 
    //do something with the color 
}); 

http://jsfiddle.net/7MMK2/26/

. 각 캔버스를 반복하면서 픽셀을 잡아야합니다.

Answer 2

홀드 온. 이미지를 확대하기 위해 픽셀 데이터를 사용할 필요가 없습니다. 그냥 척도 사용 :

image.setScale (3);

원본 이미지의 복제를 필요로하는 경우, 당신은) (처음

VAR 클론 = image.clone를 복제 할 수 있습니다;