我试图在JavaScript中为程序纹理创建一个库,出于某种原因,我无法真正理解为什么我的缩放功能不起作用。我尝试了很多东西,但总是得到时髦的结果而不是我原本想要达到的效果。基本上,如果我放大噪声纹理,我希望它看起来都是块状的。
我目前的实施:
this.Zoom = function(factor) {
var imageData, curData, newData,
zoomFactor = Math.pow(2, factor);
curData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
newData = ctx.createImageData(curData);
for (var y = 0; y < ctx.canvas.height; y++) {
for (var x = 0; x < ctx.canvas.width; x++) {
var curIndex = y * ctx.canvas.width + x;
var targetIndex = Math.floor(y / zoomFactor + x / zoomFactor) * 4;
newData.data[curIndex] = curData.data[targetIndex];
newData.data[curIndex + 1] = curData.data[targetIndex + 1];
newData.data[curIndex + 2] = curData.data[targetIndex + 2];
newData.data[curIndex + 3] = curData.data[targetIndex + 3];
}
}
ctx.putImageData(newData, 0, 0);
return this;
}
这是我的JSFiddle:http://jsfiddle.net/j18eqgrq/
出于某种原因,我得到了这种奇怪的效果,我无法绕过它。我想我用targetIndex弄乱了一些东西。
答案 0 :(得分:2)
在你的内部for循环中,代码应该是:
var curIndex = y * ctx.canvas.width * 4 + x * 4;
var targetIndex = Math.floor(y / zoomFactor) * ctx.canvas.width * 4 + Math.floor(x / zoomFactor) * 4;
您应该在因子4中考虑RGBA,并且还应通过y * image_width + x
计算缩放图像索引
答案 1 :(得分:1)
您可以通过获取原始画布并使用9参数形式context.drawImage将其绘制到新画布来实现缩放。此表单需要源矩形和目标矩形。当尺寸不同时,光源会相应拉伸。
当您还没有绘制任何内容并且想要从头开始绘制它时,您可以使用的另一种方法是使用context.scale to set a zoom factor and context.translate to set the zoom center。