나는 자바 스크립트에서 절차 적 텍스처를위한 라이브러리를 만들려고하는데 어떤 이유로 줌 기능이 작동하지 않는 이유에 대해 머리를 감쌀 수는 없습니다. 나는 많은 것을 시도했지만 원래 달성하고 싶었던 것 대신 항상 펑키 한 결과를 얻습니다. 기본적으로 노이즈 텍스처를 확대하면 모두 뭉툭하게 보이게합니다.
내 현재 구현 :
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로 뭔가 엉망이 된 것 같습니다.
내부 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
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다