Question

我正在使用Kinetic JS来显示图像，我想实现放大功能。

所以基本上我想复制鼠标指针悬停在上面的图像区域，缩放它，并将其显示在屏幕的其他位置。

您可以使用canvas context.getImageData（）函数获取HTML5画布像素数据，但是在Kinetic JS中是否有其他方法可以执行此操作，还是应该尝试获取图像的基础上下文并使用getImageData函数？

由于

Answer 1

KineticJS只使用常规画布，因此getImageData可以正常工作。只需抓住你想要的上下文。

$('#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 clone = image.clone（）;

从Kinetic JS Image获取像素数据

2 个答案: