gpt4 book ai didi

javascript - 如何使用 fabric.js 将滚动条添加到(可能是无限的) Canvas

转载 作者:行者123 更新时间:2023-11-28 04:56:15 32 4
gpt4 key购买 nike

我可能在这里遗漏了一些东西(我绝不是 HTML 或 CSS 专家,而且才刚刚开始使用 fabric)。

似乎 fabric 是创建基于形状(对象)的绘图应用程序的好工具,但我不知道如何使用它,使用户不会因为将对象从 Canvas 上移开而丢失对象.

所有演示都没有任何功能可以防止这种情况发生,但这似乎是对框架的巨大限制。有人知道解决这个问题的方法吗?

本质上,我希望允许用户任意将对象添加到 Canvas 中,并且为了可用性,这些对象必须间隔开,因此 Canvas 必须是无限的。显然, Canvas 的交互区域必须具有固定大小。

任何帮助解决这个问题的人都将不胜感激

最佳答案

添加到 Benicks 答案 - 您可以调用 canvas.on("object:moving", function(e) {}) 对象移动时触发。所以包装器将具有以下 css:

  #wrapper{
position: absolute;
overflow: auto;
max-height: 600px;
max-width: 800px;
}

带有索引文件:

<div id="wrapper">
<canvas id="c2"></canvas>
</div>

要在将对象拖到包装器边缘时扩展 Canvas ,您可以执行以下操作(在 CoffeeScript 中完成):

 canvas.on "object:moving", (e) -> 
currentCanvasHeight = canvas.height
currentCanvasWidth = canvas.width

# e.target returns the selected canvas object
# Once the objects offset left value + the objects width is greater than the canvas
# width, expand the canvas width
if (e.target.left + e.target.currentWidth) > currentCanvasWidth
canvas.setWidth currentCanvasWidth + 50
$("#wrapper").scrollLeft e.target.left # scroll alongside the canvas expansion
$('#wrapper').on 'scroll', canvas.calcOffset.bind(canvas) # to fix the mouse
#position bug issue

# do the same for the top
if (e.target.top + e.target.currentHeight) > currentCanvasHeight
canvas.setHeight currentCanvasHeight + 50
$("#wrapper").scrollTop e.target.top
$('#wrapper').on 'scroll', canvas.calcOffset.bind(canvas)

关于javascript - 如何使用 fabric.js 将滚动条添加到(可能是无限的) Canvas ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22742067/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com