0

Kinetic JS を使用して画像を表示していますが、拡大機能を実装したいと考えています。

したがって、基本的には、マウスポインターがホバリングしている画像の領域をコピーし、拡大縮小して、画面の他の場所に表示したいと思います。

canvas context.getImageData() 関数を使用して HTML5 キャンバス ピクセル データを取得できますが、Kinetic JS でこれを行う別の方法はありますか?それとも、画像の基になるコンテキストを取得して getImageData 関数を使用する必要がありますか?

ありがとう

4

2 に答える 2

2

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/

ただし、ステージにレイヤーを追加すると、少し複雑になります。各キャンバスをループしてピクセルを取得する必要があります。

于 2013-05-16T21:32:57.737 に答える
0

持続する。画像を拡大するためにピクセル データを使用する必要はありません。スケールを使用するだけです：

image.setScale(3);

元のイメージのクローンが必要な場合は、最初にクローンできます

var clone = image.clone();

于 2013-05-19T04:17:48.203 に答える