问题标签 [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.
canvas - 添加元素后,FabricJS 画布“卡住”
我正在使用创建一个应用程序fabric.js
,并且遇到了非常奇怪的行为。我正在使用常规fabric.Canvas
(不是fabric.StaticCanvas
)添加图像和文本实例,并且在添加后无法移动或调整这些项目的大小。我只添加了每种类型的几个。基本功能包含在与某个按钮上的单击事件相关的回调中,但核心结构功能看起来像这样(简化,但就结构相关代码而言,几乎所有内容都相同):
上面的代码很好地呈现了元素,但它们不能调整大小或移动,并且是静态的。奇怪的是,如果我打开和关闭我的 chrome 开发面板(使用 F12 或 [Ctrl/CMD]+SHIFT+I 两次),画布恢复了功能,一切都恢复了。我也发生了一些服务器端的事情(这只是我正在做的一个模拟示例),但我不知道如何进一步追踪到这种奇怪的行为。我正在使用最新的代码(从 github repo 构建)。想法?
javascript - 与可编辑对象分组?
有没有办法在 a 中有可编辑的对象fabric.Group
,以便可以移动其中一个对象?
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 作为交互式...您可以移动图像,但旋转和缩放是非常偶然的。
javascript - 将画布保存为 PNG 或 JPG
我想将画布另存为 PNG,而不是在新窗口中将其作为 base64 编码图像打开。
我使用了这段代码:
我想让按钮将图像保存为 PNG 或 JPG。
database - Fabric.js - 如何使用自定义属性在服务器上保存画布
我希望能够将当前画布的状态保存到服务器端数据库,可能是 JSON 字符串,然后使用loadFromJSON
. 通常,这很容易使用:
进而
但是,我还使用内置Object#set
方法在要添加到画布的织物对象上设置了一些自定义属性:
问题是,当我检查服务器端的请求时,我发现我的自定义属性没有从画布中解析出来并与其他所有内容一起发送。这可能与方法如何toObject
删除对象类中不是默认属性的任何内容有关。解决这个问题的好方法是什么,这样我就可以从服务器发送的 JSON 字符串中保存和恢复画布,并且恢复的画布也将包含我的自定义属性?谢谢。
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?
javascript - Fabric.Image.fromURL 上的 fabric.js lockUniScaling
我用fabric.js ( http://fabricjs.com ) 加载了一个图像,但我无法让'lockUniScaling' 在我的元素上工作。
这有效:
我怎样才能得到这个元素的“lockUniScale”?
如果我添加一些其他元素,我可以使用 item(1), item(2),... 来获取它们,但我无法获取图像元素。
有什么提示吗?
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" }));
没有运气检索它。任何帮助将不胜感激。这也是我与这个社区的第一次互动,所以如果我的问题不够详细,或者还有其他问题,我深表歉意。