在 HTML PaperJS canvas 元素中创建滚动条以与 paper.view.zoom 一起使用
Creating scrollbars in an HTML PaperJS canvas element for use with paper.view.zoom
- 我们有一个设置为 100% 的 PaperJS canvas width/height
- 用户可以缩放和平移
- 无论 zoom/pan 状态如何，用户都可以在 canvas 中的不同位置向 canvas 添加内容
- 当当前可查看区域外有内容时，我们想向 canvas 添加滚动条，就像在 Figma 中使用的那样
当用户使用 PaperJS canvas 缩放 in/out 或平移时，他们不会移动 DOM 中的实际 canvas 或增加 canvas 元素的大小。相反，他们将查看关系更改为 canvas 元素中的内容。
因此需要在 canvas 元素中创建滚动条，但似乎没有办法锁定滚动条比率。例如，如果滚动条在 canvas 上下文中并且您放大，则您将放大所有 canvas 内容并且滚动条的大小也会发生变化。似乎唯一的解决方案是有某种监听器，它总是根据 canvas 的 zoom/pan 状态设置它们的大小、位置等，这似乎有很多额外的代码。有人遇到过解决方案吗？
你必须按照你在问题结尾的评论去做。
- 设置滚动条初始高度为
const scrollHeight = view.height
- 创建更新函数并将其附加到
view.onFrame
- 在更新函数中根据当前缩放更新滚动对象高度
scrollObject.bounds.height = scrollHeight / view.zoom
- 然后可以通过获取最高对象的位置
obj.bounds.top、最低对象的底部边界obj.bounds.bottom来确定滚动条句柄位置，最后使用当前视图位置中心计算句柄位置 view.bounds.center
- 我们有一个设置为 100% 的 PaperJS canvas width/height
- 用户可以缩放和平移
- 无论 zoom/pan 状态如何，用户都可以在 canvas 中的不同位置向 canvas 添加内容
- 当当前可查看区域外有内容时，我们想向 canvas 添加滚动条，就像在 Figma 中使用的那样
当用户使用 PaperJS canvas 缩放 in/out 或平移时，他们不会移动 DOM 中的实际 canvas 或增加 canvas 元素的大小。相反，他们将查看关系更改为 canvas 元素中的内容。
因此需要在 canvas 元素中创建滚动条，但似乎没有办法锁定滚动条比率。例如，如果滚动条在 canvas 上下文中并且您放大，则您将放大所有 canvas 内容并且滚动条的大小也会发生变化。似乎唯一的解决方案是有某种监听器，它总是根据 canvas 的 zoom/pan 状态设置它们的大小、位置等，这似乎有很多额外的代码。有人遇到过解决方案吗？
你必须按照你在问题结尾的评论去做。
- 设置滚动条初始高度为
const scrollHeight = view.height - 创建更新函数并将其附加到
view.onFrame - 在更新函数中根据当前缩放更新滚动对象高度
scrollObject.bounds.height = scrollHeight / view.zoom - 然后可以通过获取最高对象的位置
obj.bounds.top、最低对象的底部边界obj.bounds.bottom来确定滚动条句柄位置，最后使用当前视图位置中心计算句柄位置view.bounds.center