fabricjs 相关问题

在fabricJS中如何使用transformMatrix变换点？

我正在尝试将点（通过 Fabric.Circle 制作）放置在 Fabric.Polygon 的角上。用户可以移动、缩放或旋转多边形。然而，每次修改后我都希望有......

fabric.textbox 不适用于 google chrome？

我正在删除文本框中的所有文本，或者我正在使用退格键删除每个字母。再次删除所有字母后，我正在打字，但它被阻止了。不允许移动。

降低高度时如何防止边框半径变形？

重现步骤 创建织物。 js 具有固定宽度和高度的矩形对象。 对矩形应用边框半径。 显着降低矩形的高度（例如，降低...

降低高度时如何防止边框半径变形？

复制链接 https://jsfiddle.net/YashChapani/g0xm9tqv/2/ 重现步骤 创建织物。 js 具有固定宽度和高度的矩形对象。 对矩形应用边框半径。 十二月...

添加图像作为背景时，其在右侧显示白线

问题是当我使用以下方法添加背景图像时，然后在 Zoom Canvas 后，当缩放比例为奇数（例如 5%、7%、11% 等）时，会出现问题；它在末端显示一条白线...

当添加图像作为背景时，它在 Fabric.js 的右侧显示白线

问题是当我使用以下方法添加背景图像时，然后在 Zoom Canvas 后，当缩放比例为奇数（例如 5%、7%、11% 等）时，会出现问题；它在末端显示一条白线...

Fabric.js 文本框调整大小和编辑可以在本地进行，但当 Canvas 存储在 Pinia 中时则不行

我正在使用 Fabric.js 和 Pinia 开发 Nuxt3 项目。我想使用 Pinia 商店全局管理 Fabric.js 画布实例。目标是使用 st 中的操作将文本添加到画布...

如何在fabricJS中使用canvas.loadFromJSON加载视频

我正在尝试将视频设置为画布上的背景，当我第一次设置它时效果很好。但是在使用 loadFromJSON() 重新加载它时，它在画布上显示空白背景。 我正在使用

如何禁用选择freedrawing Fabricjs

在 FabricJs 中使用 FreeDrawing 绘制某些内容后，您可以选择绘制的内容并移动它。有没有办法禁用此选择？

如何让Fabricjs调整图像大小

我想使用 Fabric Canvas 库来调整上传到浏览器中的图像的大小 - 然后再次下载调整大小的图像。 上传按钮工作正常，但不显示图像...

为什么 Fabric v5 不允许我在 safari 中拖动或调整大小

我使用的是 Safari 版本 15 我创建了一个网页，我希望能够通过 Fabric.js 拖动一些文本。 这在 IE (chromium)、Chrome、Brave 和 Firefox 中运行得非常好。我只是哈...

在fabric.js中设置画布的宽度和高度

我的 HTML5 画布中有一个图像背景。 var canvas = new Fabric.Canvas('#canvas1'); canvas.setBackgroundImage( 'http://fabricjs.com/assets/jail_cell_bars.png', 可以...

调整织物矩形大小而不调整文本框大小

在这个 jsFiddle 中，我有一个包含矩形和文本框的 Fabric 组。我需要能够在不缩放文本的情况下缩放矩形，因此我尝试在选择组时取消分组，然后分组...

Fabric Canvas 和 StaticCanvas 的区别

谁能解释一下Fabric JS中Canvas和Static Canvas的区别和用途。我对这两个话题都很困惑！

Fabric.js 与 Vue 3 - 无法加载 svg 图像

我正在尝试使用 Fabric.js ^6.3.0 和 Vue 3 将 svg 图像加载到画布： 从 'fabric' 导入 * 作为布料 从 'vue' 导入 { onMounted, ref } 常量 </desc> <question vote="1"> <p>我正在尝试使用 Fabric.js ^6.3.0 和 Vue 3 将 svg 图像加载到画布：</p> <pre><code>&lt;script setup lang=&#34;ts&#34;&gt; import * as fabric from &#39;fabric&#39; import { onMounted, ref } from &#39;vue&#39; const fabricCanvas = ref() onMounted(() =&gt; { const canvas = new fabric.Canvas(fabricCanvas.value) fabric.loadSVGFromURL(&#39;./assets/roof.svg&#39;, (objects, options) =&gt; { const svg = fabric.util.groupSVGElements(objects, options) canvas.add(svg) canvas.renderAll() }) }) &lt;/script&gt; &lt;template&gt; &lt;canvas ref=&#34;fabricCanvas&#34; width=&#34;500&#34; height=&#34;500&#34;&gt;&lt;/canvas&gt; &lt;/template&gt; </code></pre> <p>什么也没有发生，svg 没有加载到画布中。但如果我将 Jquery 与 Fabric.js 5.3.0 一起使用，这段代码就可以正常工作</p> <p>在这一行<pre><code>const svg = fabric.util.groupSVGElements(objects, options)</code></pre>中，我遇到了打字稿错误：<pre><code>objects</code></pre>：“Element”类型的参数不能分配给“FabricObject<Partial, SerializedObjectProps, ObjectEvents>[]”类型的参数</p> <p>您尝试过使用 Fabric 的 Vue 3 吗？请帮助我！</p> </question> <answer tick="false" vote="0"> <p>有同样的问题。我找到了解决方案。 基于官方描述：<a href="https://fabricjs.com/api/functions/loadsvgfromurl/" rel="nofollow noreferrer">https://fabricjs.com/api/functions/loadsvgfromurl/</a> loadSVGFromURL 的第二个参数现在获取“原始 svg 元素和生成的 FabricObject 作为参数”。所以你可以使用第二个参数，就像它一样！</p> <pre><code>fabric.loadSVGFromURL(svgFile, (_orig, converted) =&gt; { this.canvas.add(converted); this.canvas.renderAll(); }); </code></pre> </answer> </body></html>

为 Fabric.js 加载自定义字体

我希望向我的 Fabric.js 应用程序添加 Open-Type 字体。我发现这个问题，Custom font in Pixi.js，几乎问同样的事情。我们如何从文件系统加载字体？我尝试使用...

如何在移动设备上放大Fabric JS？

我可以使用画布内的计算机放大和缩小。但是，我无法在移动设备（智能手机、平板电脑等）上放大和缩小。当我查看文档时，我发现了 &...

将 SVG 添加到 FabricJS 画布时出现类型错误（不可迭代）

我有一个fabricjs画布，我正在尝试向其中添加一个SVG。但无论我做什么，我都会遇到问题。它一直在说： “未捕获（承诺中）类型错误：t 不可迭代”。 让 svg = ` 我有一个fabricjs画布，我正在尝试向其中添加一个SVG。但无论我做什么，我都会遇到问题。它一直在说： “未捕获（承诺中）类型错误：t 不可迭代”。 let svg = `<svg viewBox="-8 -8 136 136"> <path stroke="#000000" stroke-width="8" d="m0 51.82677l0 0c0 -28.623135 23.203636 -51.82677 51.82677 -51.82677l0 0c13.745312 0 26.927654 5.4603047 36.64706 15.17971c9.719406 9.719404 15.17971 22.901749 15.17971 36.64706l0 0c0 28.623135 -23.203636 51.82677 -51.82677 51.82677l0 0c-28.623135 0 -51.82677 -23.203636 -51.82677 -51.82677zm25.913385 0l0 0c0 14.311565 11.60182 25.913387 25.913385 25.913387c14.311565 0 25.913387 -11.601822 25.913387 -25.913387c0 -14.311565 -11.601822 -25.913385 -25.913387 -25.913385l0 0c-14.311565 0 -25.913385 11.60182 -25.913385 25.913385z" fill="none"></path> </svg>`; let canvas = new fabric.Canvas("canvas"); let path = fabric.loadSVGFromString(svg, function(objects, options) { let obj = fabric.util.groupSVGElements(objects, options); obj.set({ left: canvas.width / 2 - obj.width / 2, top: canvas.height / 2 - obj.height / 2 }); canvas.add(obj).renderAll(); }); 希望有人可以帮助我 我不确定您使用的是哪个版本，但我已将您的代码添加到可运行的代码片段中，它似乎对我来说工作得很好： let svg = `<svg viewBox="-8 -8 136 136"> <path stroke="#000000" stroke-width="8" d="m0 51.82677l0 0c0 -28.623135 23.203636 -51.82677 51.82677 -51.82677l0 0c13.745312 0 26.927654 5.4603047 36.64706 15.17971c9.719406 9.719404 15.17971 22.901749 15.17971 36.64706l0 0c0 28.623135 -23.203636 51.82677 -51.82677 51.82677l0 0c-28.623135 0 -51.82677 -23.203636 -51.82677 -51.82677zm25.913385 0l0 0c0 14.311565 11.60182 25.913387 25.913385 25.913387c14.311565 0 25.913387 -11.601822 25.913387 -25.913387c0 -14.311565 -11.601822 -25.913385 -25.913387 -25.913385l0 0c-14.311565 0 -25.913385 11.60182 -25.913385 25.913385z" fill="none"></path> </svg>`; let canvas = new fabric.Canvas("canvas"); let path = fabric.loadSVGFromString(svg, function(objects, options) { let obj = fabric.util.groupSVGElements(objects, options); obj.set({ left: canvas.width / 2 - obj.width / 2, top: canvas.height / 2 - obj.height / 2 }); canvas.add(obj).renderAll(); }); canvas.renderAll(); <script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.6/fabric.js"></script> <canvas id="canvas" width="800" height="600"></canvas><br/>

fabricjs：如何将 loadSVGFromURL 与 React useEffect 一起使用？

我尝试使用 useEffect 将 SVG 渲染到画布上，如下所示： // 存储画布引用 const [canvas, setCanvas] = useState(); 使用效果（（）=> { 常量 c = ...

如何在 Fabric 的 cava 中设置背景图像？

我想上传图像并将其设置为 html5 画布背景，但我也在使用 FabricJS，并且我的应用程序是使用 NUXT 构建的。 我收到错误： 未捕获的类型错误：画布。