HTML5 canvas 和滚动
HTML5 canvas and scrolling
我有一个大小为 1024x768 的 canvas 元素，我在其中绘制了一个非常大的图像，假设宽度 >> 1024 和高度 >> 768。可以使用普通滚动条滚动图像以供查看完全。
用户可以单击 canvas 以将顶点添加到多边形：每次添加顶点时，都会绘制一条从新顶点到鼠标光标的直线。
每次鼠标移动到 canvas 上都会更新 canvas，以便从顶点到新的鼠标光标位置重新绘制这条线。
由于图像非常大，重绘非常慢，所以我只想重绘当前可见的图像块，或者更好的是，受此行影响的 "sub-chunk"。
问题是：如何根据用户滚动图像的程度来检测上下文可见部分的当前topLeft和bottomRight？基本上我想添加对自定义视口的支持，但我似乎无法利用 scolling 信息来确定要从原始图像中裁剪的块的 boundingBox。
I actually have a canvasDiv container, which is the real scrollable element, not the canvas itself.
这意味着您的 canvas 是完整尺寸并且您正在使用容器 div 作为一种 "frame"。这真的很糟糕，因为 canvas 像素非常昂贵，特别是如果您甚至不使用它们（它们在视口之外）。
这里最好的方法是将canvas大小设置为容器大小，并使用drawImage函数来控制滚动。原始图像将放置在屏幕外 canvas 或图像元素上。这样我可以保证你有更好的表现。
你会失去滚动条，这是缺点。
我假设您通过将较大的 canvas 元素包含在较小的 div 中来创建滚动条。
相反，您可以通过以下方式模仿此设置：
canvas 容器的大小 div。
添加 2 个 input type=range 控件来充当垂直和水平滚动条（或者如果你想花哨的话，可以使用 jqueryUI 滚动条插件）。
然后您可以使用 context.drawImage 的裁剪版本仅绘制由范围控件指定的图像部分。 drawImage 的剪辑版本如下所示：drawImage(myLargeImage, clipX,clipY,clipWidth,clipHeight, 0,0,canvas.width,canvas.height)
我有一个大小为 1024x768 的 canvas 元素，我在其中绘制了一个非常大的图像，假设宽度 >> 1024 和高度 >> 768。可以使用普通滚动条滚动图像以供查看完全。
用户可以单击 canvas 以将顶点添加到多边形：每次添加顶点时，都会绘制一条从新顶点到鼠标光标的直线。 每次鼠标移动到 canvas 上都会更新 canvas，以便从顶点到新的鼠标光标位置重新绘制这条线。
由于图像非常大，重绘非常慢，所以我只想重绘当前可见的图像块，或者更好的是，受此行影响的 "sub-chunk"。
问题是：如何根据用户滚动图像的程度来检测上下文可见部分的当前topLeft和bottomRight？基本上我想添加对自定义视口的支持，但我似乎无法利用 scolling 信息来确定要从原始图像中裁剪的块的 boundingBox。
I actually have a canvasDiv container, which is the real scrollable element, not the canvas itself.
这意味着您的 canvas 是完整尺寸并且您正在使用容器 div 作为一种 "frame"。这真的很糟糕，因为 canvas 像素非常昂贵，特别是如果您甚至不使用它们（它们在视口之外）。
这里最好的方法是将canvas大小设置为容器大小，并使用drawImage函数来控制滚动。原始图像将放置在屏幕外 canvas 或图像元素上。这样我可以保证你有更好的表现。
你会失去滚动条，这是缺点。
我假设您通过将较大的 canvas 元素包含在较小的 div 中来创建滚动条。
相反，您可以通过以下方式模仿此设置：
canvas 容器的大小 div。
添加 2 个 input type=range 控件来充当垂直和水平滚动条（或者如果你想花哨的话，可以使用 jqueryUI 滚动条插件）。
然后您可以使用
context.drawImage的裁剪版本仅绘制由范围控件指定的图像部分。 drawImage 的剪辑版本如下所示：drawImage(myLargeImage, clipX,clipY,clipWidth,clipHeight, 0,0,canvas.width,canvas.height)