[英]Getting pixel data from Kinetic JS Image
我正在使用Kinetic JS來顯示圖像,我想實現放大功能。
所以基本上我想復制鼠標指針懸停在上面的圖像區域,縮放它,並將其顯示在屏幕上的其他位置。
您可以使用canvas context.getImageData()函數獲取HTML5畫布像素數據,但是在Kinetic JS中是否有其他方法可以執行此操作,或者我應該嘗試獲取圖像的基礎上下文並使用getImageData函數?
謝謝
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
});
然而,一旦你向舞台添加更多圖層,事情就會變得有點棘手。 你必須遍歷每個畫布並抓住像素。
堅持,稍等。 您不需要使用像素數據來放大圖像。 只是使用規模:
image.setScale(3);
如果您需要克隆原始圖像,可以先克隆它
var clone = image.clone();
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.