问题标签 [fabricjs2]

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 投票
0 回答
92 浏览

javascript - fabricjs 在移动设备上的 base64 数据源上应用过滤器

我正在通过输入 type="file" 上传图片,并在 base64 中得到一张图片:

我在fabricjs中对其应用过滤器,如下所示:

但是如果渲染了应用了滤镜的画布,图片就会消失。如果我之后删除过滤器,图片会再次显示。

我在 v.2.0.0-rc.3 中使用了 fabricjs

0 投票
1 回答
1636 浏览

fabricjs - 织物JS。原始容器内的图像裁剪

我需要裁剪功能,图像块必须是不可更改的,这是我在 canva.com 上看到的最好的 在此处输入图像描述 如果原始块 w/h!= 图像 w/h(不同的形状尺寸)用户必须能够在当前活动图像对象中移动和调整图像大小不改变原始对象尺寸。目前我可以使用 clipTo 进行裁剪并通过动作移动它,但这并不方便。我也可以将图像绑定到矩形,但我会隐藏图像的裁剪部分......

此处需要工作演示:此处演示:https ://www.canva.com/design/DACkUOnIfcs/dx5k5cs4uJbyscmmpzp1Pg/edit

我可以用当前的fabricjs实现类似的东西吗?

0 投票
1 回答
516 浏览

html5-canvas - 在织物js中计算色调旋转

我们如何从正常的色调度值(0-360)计算fabricjs中的色调旋转过滤器中的旋转参数值(-1到1)?

Fabricjs如何计算Hue Rotation滤镜中的旋转值?

0 投票
1 回答
92 浏览

javascript - 如何以编程方式“突出显示”对象,而不实际“选择”对象

所以我有这种情况:

我在画布中有一个被取消选择的对象。我想显示对象的控件(句柄和边框)以使其外观“突出显示”但实际上并未选择对象(意味着不做 canvas.setActiveObject(obj) )

只是希望能够显示对象的控件,仅此而已。

我尝试的是这样做:

但没有运气。提前感谢大家:)

0 投票
2 回答
3370 浏览

fabricjs - setText()在fabricjs版本2中不起作用

我正在尝试在较旧的fabricjs版本中明确地将文本设置为文本框object.setText("something")

在fabric js版本2中工作但不工作。这个版本中引入了任何其他方式吗?

0 投票
1 回答
215 浏览

fabricjs - 限制区域泛Fabircjs

我有一个画布,现在是无限的,我可以将 PAN 调整到我想要的坐标。但是我们的用户在大量使用它后会迷路,因为他们找不到对象。

我想实现用户在画布中放置的限制。

当工作尺寸小于画布尺寸时,我知道如何限制面包,根本不让面包工具发挥作用。

但是当用户要求我提供大于画布大小的面包时,我遇到了问题

默认画布尺寸为 900 x 600,我的用户需要能够在 2000x2000 上工作。画布仍为 900x600,但启用了 PAN 工具,并且可以在画布内移动,最大为 2000x2000 限制

我在fabric demos中看到,有一个Pan的教程,但它与我的问题不兼容,因为在那个例子中,画布是固定的

0 投票
1 回答
585 浏览

javascript - 绘制 Poligon FabricJS 2.0

在以前版本的fabricjs中,我有以下功能,可以帮助我在单击鼠标时绘制一个多边形,并且它是正确完成的。

这个函数的问题是它会生成一个不可见的矩形或类似的东西,其大小小于画布的大小。或者这就是我在画布上看到的,正因为如此,我看到了那个盒子里的人物。

我不知道如何更好地解释它

创建对象

创建对象的最终结果

小提琴工作示例

0 投票
0 回答
45 浏览

selection - fabrcjs v2 选择重大更改

在 fabricjs v2 的重大更改列表中,其中一个条目说:

“在画布上单击并拖动会创建一个矩形选择。与此矩形相交的所有边界框都将在鼠标向上时被选中,从而创建一个多选。”

这在拥挤的画布上是不切实际的,因为很难选择你想要的。

有没有办法只选择边界矩形包含在选择区域中(而不是相交)的对象?


我在 rc3 中检查了一下,下面的 mod 做了我想要的:
我知道这很残酷......
而且我无法知道这是否会破坏其他东西(至少现在还没有)

在 _collectObjects() 函数的第 11484 行:

0 投票
5 回答
7403 浏览

javascript - 在织物 js 中缩放时保持 strokeWidth

注意:我已经提交了SO question,但这对我的情况没有用,因为

1)我试图保持以前的边界,但到目前为止它在缩放时重新计算边界。

我在下面添加了代码以在缩放对象时停止自动增加边框。现在的问题是我为对象添加了一个 5px 的边框,但是当缩放对象时,它并没有保持我之前添加的边框。

现在我想要的是在缩放对象时防止边框增加。边界应保持原样。

这是片段/ Codepen

脚步

1)添加矩形
2)应用边框(比如说 5)
3)缩放该对象

现在您可以看到应用的边框消失了。那么如何解决呢?

更新

我尝试了以下选项,但它不起作用,基本上我试图为矩形、圆形、三角形、线条、多边形等对象维护 strokeWidth/Border

到目前为止我已经尝试过:

我参考过的问题:

https://github.com/kangax/fabric.js/issues/66

在 Fabricjs 中的 Groups 的情况下,在调整大小时无法保持 strokeWidth 的厚度

Fabricjs如何缩放对象但保持边框(笔触)宽度固定

调整fabricjs rect的大小以保持边框大小

https://github.com/kangax/fabric.js/issues/2012

但无法找到解决方案。

0 投票
2 回答
3056 浏览

canvas - 在fabric js中删除组/所有选定的对象

我正在尝试删除fabric js(版本:2.0.0-beta.7)中的组。
但它只适用于单个对象,那么如何修复它以便它可以删除所有选定的对象?

代码笔: https ://codepen.io/dhavalsisodiya/pen/bLQxKo

脚步

1)尝试添加2个或更多对象
2)选择其中一些
3)现在尝试删除它,它会通过这个错误:TypeError: activeObject.forEach is not a function