在HTML Paperjs帆布元素中创建滚动条,以与Paper.View.Zoom一起使用
- 我们有一个PaperJS帆布,该画布设置为100%宽度/高度
- 用户可以缩放,而Pan
- 用户可以在画布的各个地方添加内容,而不管
- 我们想在画布上添加scrollbars,就像在帆布中一样 当用户放大/输出或用Paperjs帆布铺好时,无花果在当前可查看的区域之外时
,他们不会在DOM中移动实际的画布或增加帆布元素的大小。相反,他们将观看关系更改为画布元素中的内容。
因此,需要在画布元素中创建滚动条,但似乎没有一种锁定滚动条比的方法。例如,如果滚动条在画布上下文中,并且您放大了,那么您将放大所有画布内容,而滚动条也会变化。似乎唯一的解决方案是将某种侦听器与画布的缩放/锅状态有关,这些侦听器总是设置其大小,位置等,这似乎是很多额外的代码。有人遇到解决方案吗?
- We have a PaperJS canvas that is set to 100% width/height
- Users can zoom and pan
- Users can add content to the canvas at various places within the canvas regardless of zoom/pan state
- We want to add scrollbars to the canvas like those used in Figma when there is content outside the currently viewable area
When a user zooms in/out or pans with a PaperJS canvas, they're not moving the actual canvas in the DOM or increasing the canvas element's size. Instead, they're changing the viewing relationship to content within the canvas element.
Thus the scrollbars need to be created in the canvas element but there doesn't appear to be a way to lock the scrollbars ratio. For example, if the scrollbars are in the canvas context and you zoom in, you're zooming on all of the canvas content and the scrollbars change in size as well. It seems like the only solution would be to have some sort of listener in place that always sets their size, position, etc in relation to the zoom/pan state of the canvas, which seems like a lot of extra code. Has anyone come across a solution for this?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
您必须在问题结束时做您评论的事情。
const scrollheight = view.height
view.onframe.onframe
obj.bounds.top
,确定滚动条的位置,最低对象底端obj.bounds.bottom
,最后使用当前视图位置中心来计算句柄位置view.bounds.cents.center
You would have to do what you commented on the end of your question.
const scrollHeight = view.height
view.onFrame
scrollObject.bounds.height = scrollHeight / view.zoom
obj.bounds.top
, the lowest objects bottom boundsobj.bounds.bottom
, and finally use the current view position center to calculate the handle positionview.bounds.center