javascript - 图片在开始滚动时跳动

Question

我写了一些代码来放大我的图片，但是当我一开始滚动时，这张图片跳了一点。如何解决这个问题？

Full page view .

Editor view.

HTML

<canvas id="canvas"></canvas>

JS

function draw(scroll) {
  scroll = (window.scrollY || window.pageYOffset) / (document.body.clientHeight - window.innerHeight) * 3000;
  canvas.setAttribute('width', window.innerWidth);
  canvas.setAttribute('height', window.innerHeight);

//The main formula that draws and zooms the picture

  drawImageProp(ctx, forest, 0, (-scroll * 3.9) / 4, canvas.width, canvas.height + (scroll * 3.9) / 2);
}

Answer 1

不是错误修复

我看过 Codepen 示例，它确实跳到了顶部(有时)。我有一个修复程序给你，但我没有时间找到你的代码问题的根源。我确实注意到跳跃涉及一个方面的变化，所以它必须在你的错误所在的缩放中。 (注意底片)

GPU 是更好的裁剪器

此外，您的代码实际上在做不必要的工作，因为您正在计算图像裁剪区域。 Canvas context 为您进行裁剪，尤其擅长裁剪图像。即使您提供了剪辑区域，图像仍将通过剪辑，因为它是渲染管道的一部分。唯一一次你应该关心图像的裁剪显示是图像的任何部分是否可见，这样你就不会发送绘制调用，只有在你插入图像渲染计数时它才真正重要(即游戏 Sprite 计数500+)

代码示例

无论如何我离题了。下面是我的代码。您可以添加检查和平衡。 (参数审查、缩放最大最小值等)。

调用函数。

  // get a normalised scale 0-1 from the scroll postion
  var scale = (window.scrollY || window.pageYOffset) / (document.body.clientHeight - window.innerHeight);
  // call the draw function 
  // scale 0-1 where 0 is min scale and 1 is max scale (min max determined in function
  // X and y offset are clamped but are ranged
  // 0 - image.width and 0 - image.height
  // where 0,0 shows top left and width,height show bottom right
  drawImage(ctx, forest, scale, xOffset, yOffset);

函数。

评论应该涵盖您需要了解的内容。您会注意到，我所关心的只是图像应该有多大以及左上角的位置。 GPU 将为您进行裁剪，并且不会花费您处理时间(即使是未加速的显示)。我个人喜欢使用归一化值 0-1，这是一些额外的工作，但我的大脑喜欢简单，它还减少了对魔数(Magic Number)的需求(魔数(Magic Number)是代码不可适应的标志)。功能适用于任何尺寸的显示器和任何尺寸的图像。哦，我喜欢除法而不是乘法，(一个坏的编码习惯源于一个好的数学习惯)用 * 0.5 替换 /2 和需要的括号会使它更多可读。

function drawImage(ctx, img, scale, x, y){
  const MAX_SCALE = 4;
  const MIN_SCALE = 1;
  var w = canvas.width; // set vars just for source clarity
  var h = canvas.height;

  var iw = img.width;
  var ih = img.height;

  var fit = Math.max(w / iw, h / ih); // get the scale to fill the avalible display area

  // Scale is a normalised value from 0-1 as input arg Convert to range
  scale = (MAX_SCALE - MIN_SCALE) * scale + MIN_SCALE; 

  var idw = iw * fit * scale; // get image total display size;
  var idh = ih * fit * scale;

  x /= iw; // normalise offsets
  y /= ih; //

  x = - (idw - w) * x;  // transform offsets to display coords
  y = - (idh - h) * y;

  x = Math.min( 0, Math.max( - (idw - w), x) ); // clamp image to display area
  y = Math.min( 0, Math.max( - (idh - h), y) ); 

  // use set transform to scale and translate
  ctx.setTransform(scale, 0, 0, scale, idw / 2 + x, idh / 2 + y);  

  // display the image to fit;
  ctx.drawImage(img, ( - iw / 2 ) * fit, (- ih / 2 ) * fit);

  // restore transform.
  ctx.setTransform(1, 0, 0, 1, 0, 0)
}

抱歉，我没有直接解决问题，但希望这能帮助您重新设计您的方法。

我最近添加了一个类似的答案，涉及使用鼠标进行缩放和平移(和旋转)，您可能会对它感兴趣 How to pan the canvas? 它仍然有点困惑“注意 self (我清理它)”并且没有边界限制。但展示了如何设置缩放原点，以及如何从屏幕空间转换为世界空间。 (找到屏幕像素在平移/缩放/旋转显示器上的位置)。

祝你的元素好运。