问题标签 [fabricjs]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
3125 浏览

canvas - FabricJS - 设置对象位置,枢轴位于左上角

我开始使用非常棒的FabricJS框架,并注意到对象定位的工作方式与 CSS 约定有点不同。CSS 将定位枢轴放置在左上角的位置,FabricJS 将其放置在对象的中心:

CSS

FabricJS

有没有办法控制这个设置?谢谢。


编辑:

这是该项目路线图上的现有项目。所以它会在未来发生,但目前不支持。

0 投票
2 回答
2141 浏览

javascript - Fabric js取代了调整大小旋转控件

http://i.stack.imgur.com/MeJAo.jpg

我有一个简单的 fabric.canvas 元素,它有一个背景,我将它的宽度和高度设置为与上图相同。然后添加帽子图像。问题是调整大小控件被取代了。我在图像中也清楚地表明了这一点。

这就是我将画布添加到页面的方式

这就是我添加图像的方式

0 投票
2 回答
9302 浏览

canvas - 添加元素后,FabricJS 画布“卡住”

我正在使用创建一个应用程序fabric.js,并且遇到了非常奇怪的行为。我正在使用常规fabric.Canvas(不是fabric.StaticCanvas)添加图像和文本实例,并且在添加后无法移动或调整这些项目的大小。我只添加了每种类型的几个。基本功能包含在与某个按钮上的单击事件相关的回调中,但核心结构功能看起来像这样(简化,但就结构相关代码而言,几乎所有内容都相同):

上面的代码很好地呈现了元素,但它们不能调整大小或移动,并且是静态的。奇怪的是,如果我打开和关闭我的 chrome 开发面板(使用 F12 或 [Ctrl/CMD]+SHIFT+I 两次),画布恢复了功能,一切都恢复了。我也发生了一些服务器端的事情(这只是我正在做的一个模拟示例),但我不知道如何进一步追踪到这种奇怪的行为。我正在使用最新的代码(从 gi​​thub repo 构建)。想法?

0 投票
1 回答
765 浏览

javascript - 与可编辑对象分组?

有没有办法在 a 中有可编辑的对象fabric.Group,以便可以移动其中一个对象?

0 投票
1 回答
989 浏览

jquery-ui - 当 JQueryUI 小部件与 Fabric.js 一起使用时,旋转/调整大小控件的行为异常

我刚刚发现了 Fabric.js,虽然文档有点少,但它似乎可以处理我正在构建的基于 HTML 的 Dream Board 工具所需的一切。不过,它似乎不能很好地与 JQueryUI 配合使用。

当我将我的任何对象设置为 JQueryUI 小部件、按钮、对话框等时......控制手柄似乎在我的画布项目的上半部分没有响应,甚至在底部,用于调整大小的命中区域/旋转大大减少,这使得物品难以操作。有没有人遇到过这个?这是一个已知的问题?我检查了 github 并试图搜索 SO 无济于事。

谢谢!

http://seismicdevelopment.com/test/no-jquery-uis.html - 没有 JQuery UI 小部件...表现出我的预期。

http://seismicdevelopment.com/test/with-jquery-uis.html - 点击“添加图片”,你会得到一张图片,但与其他页面相比,你会注意到图片的角落是' t 作为交互式...您可以移动图像,但旋转和缩放是非常偶然的。

0 投票
3 回答
16575 浏览

javascript - 将画布保存为 PNG 或 JPG

我想将画布另存为 PNG,而不是在新窗口中将其作为 base64 编码图像打开。

我使用了这段代码:

我想让按钮将图像保存为 PNG 或 JPG。

0 投票
5 回答
42885 浏览

database - Fabric.js - 如何使用自定义属性在服务器上保存画布

我希望能够将当前画布的状态保存到服务器端数据库,可能是 JSON 字符串,然后使用loadFromJSON. 通常,这很容易使用:

进而

但是,我还使用内置Object#set方法在要添加到画布的织物对象上设置了一些自定义属性:

问题是,当我检查服务器端的请求时,我发现我的自定义属性没有从画布中解析出来并与其他所有内容一起发送。这可能与方法如何toObject删除对象类中不是默认属性的任何内容有关。解决这个问题的好方法是什么,这样我就可以从服务器发送的 JSON 字符串中保存和恢复画布,并且恢复的画布也将包含我的自定义属性?谢谢。

0 投票
1 回答
3709 浏览

json - FabricJS - Error when loading Canvas from JSON

I'm using a custom object extended from fabric.Image in my canvas, as suggested in this answer. When I retrieve the json string from the server, I get odd errors when attempting to load it to the canvas:

I get an odd printout to the console: Cannot call method 'setupState' of undefined (fabric.min.js: 1118). I tried replacing the call with canvas.loadFromJSON(json), and instead got a vague SyntaxError: Unexpected token o error. When I used a regular fabric.Image before the change suggested in the linked thread, this code worked fine. I fear this might be something I'm missing when I extended favric's Image class with aditional data. Thoughts?

0 投票
0 回答
2224 浏览

javascript - Fabric.Image.fromURL 上的 fabric.js lockUniScaling

我用fabric.js ( http://fabricjs.com ) 加载了一个图像,但我无法让'lockUniScaling' 在我的元素上工作。

这有效:

我怎样才能得到这个元素的“lockUniScale”?

如果我添加一些其他元素,我可以使用 item(1), item(2),... 来获取它们,但我无法获取图像元素。

有什么提示吗?

0 投票
2 回答
4584 浏览

javascript - 向 Fabric.js 元素添加 ID

我正在使用 Fabric.js 库在 Canvas 中创建一个“类似地图”的应用程序。我基本上把图像放下,然后用正确的坐标在图像顶部放置圆圈。点位置和名称作为从 ajax 调用接收的 JSON 数据传入。我需要一种方法来引用任何单个圈子,以便我可以获取有关该圈子的更多信息(每个圈子都有一个包含更详细信息的弹出窗口)。

我在文档中找不到解释如何执行此操作的任何地方,我尝试将 ID 添加到这样的对象:

tokens.add(new fabric.Circle({ radius: 25, fill: '#f55', top: 100, left: 70, id: "foo" }));

没有运气检索它。任何帮助将不胜感激。这也是我与这个社区的第一次互动,所以如果我的问题不够详细,或者还有其他问题,我深表歉意。