缩小 Canvas 后,我遇到了 context.getImageData() 问题。
我已将 Canvas 添加到 HTML 页面:
我在 Canvas 上绘制了图像,就像按钮一样。我正在测试 Alpha channel 以了解鼠标是否位于按钮上方:
var mx = (e) ? (e.offsetX || e.layerX) : 0;
var 我的 = (e) ? (e.offsetY || e.layerY) : 0;
var cx = mx - (btn.x * this.ratio - 2;
var cy = my - btn.y * this.ratio - 2;
var 像素 = btn.getContext().getImageData(cx, cy, 1, 1);
for (var j : number = 3; j
该按钮是从大图像中切片并预渲染的:
var btn = createCanvas("img.png", 0, 0, 100, 100);
函数 createCanvas(img, sx , sy , w , h )
{
var canvas = document.createElement("canvas");
Canvas 宽度=w;
Canvas 高度=h;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, sx, sy, w, h, 0, 0, w, h);
返回 Canvas ;
}
之后,将切片按钮/图像添加到主 Canvas 中。
this.context.drawImage(btn, 0,0, btn.width, btn.height, 100, 100, btn.width, btn.height);
它工作得很好,直到我开始缩放整个 Canvas 。
函数规模() {
变量比例= {};
scale.x = window.innerWidth/this.canvas.width;
scale.y = window.innerHeight/this.canvas.height;
变量比率=scale.x<=scale.y?比例.x : 比例.y;
}
当我缩小 Canvas 后,按钮点击/上方区域比按钮/图像本身更大。看起来它没有被缩放,并且它采用原始的宽度和高度。然而,图形会根据 Canvas 比例进行缩放。
我尝试将宽度和高度乘以比率,但它缩放了按钮的图像,但鼠标 react 的区域仍然比按钮大。
我应该在代码中更改什么才能解决该问题?
附:我为我的英语道歉。 :)
编辑
我用来缩放 Canvas 的函数
window.addEventListener('resize', resize, false);
window.addEventListener('orientationchange', resize, false);
var canvas = $('#canvas');
var ratio = 1;
var originalCanvasW = 800;
var originalCanvasH = 600
function resize(e)
{
var scale = {x: 1, y: 1};
var s : string = '';
scale.x = window.innerWidth / canvas.width;
scale.y = window.innerHeight / canvas.height;
ratio = scale.x <= scale.y ? scale.x : scale.y;
ratio = (ratio > 1) ? 1 : ratio;
canvas.css('width',originalCanvasW*ratio);
canvas.css('height',originalCanvasH*ratio);
}
最佳答案
您正在使用 CSS 缩放 Canvas 。当您这样做时,您实际上并没有影响 Canvas 本身,您只是影响了它在网站 DOM 中的表示。在大多数情况下,不建议使用 CSS 缩放 Canvas ,因为它不会改变内部绘图分辨率,这意味着 Canvas 将显示模糊。但这也导致一个 Canvas 像素不再相当于一个屏幕像素。
context.getImageData
仍然使用内部分辨率 (width="960"height="620
) 作为其坐标,而您使用的鼠标坐标是在 Canvas 嵌入的网页的坐标系。
要解决这个问题,有两种可能:
- 将屏幕像素坐标(来自鼠标事件)转换为 Canvas 像素坐标(用于调用上下文函数)时考虑当前缩放因子。
- 不要通过 CSS 缩放 Canvas 。直接更改canvas.width和canvas.height并相应调整context.scale,使960px仍然是 Canvas 的完整宽度。
我会推荐第二种解决方案,因为它可能看起来也会好得多。
关于javascript - HTML5 canvas如何缩放图像按钮的context.getImageData,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21344680/