gpt4 book ai didi

javascript - 从 Kinetic JS Image 获取像素数据

转载 作者:行者123 更新时间:2023-12-02 18:43:53 24 4
gpt4 key购买 nike

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

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

您可以使用 canvas context.getImageData() 函数获取 HTML5 Canvas 像素数据,但是在 Kinetic JS 中是否有其他方法可以做到这一点,或者我应该尝试获取图像的底层上下文并使用 getImageData 函数?

谢谢

最佳答案

KineticJS 仅使用常规 Canvas ,因此 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/

但是,一旦您向舞台添加更多层,事情就会变得有点棘手。您必须循环遍历每个 Canvas 并获取像素。

关于javascript - 从 Kinetic JS Image 获取像素数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16596575/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com