fabricjs 相关问题

我正在尝试使用 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><script setup lang="ts"> import * as fabric from 'fabric' import { onMounted, ref } from 'vue' const fabricCanvas = ref() onMounted(() => { const canvas = new fabric.Canvas(fabricCanvas.value) fabric.loadSVGFromURL('./assets/roof.svg', (objects, options) => { const svg = fabric.util.groupSVGElements(objects, options) canvas.add(svg) canvas.renderAll() }) }) </script> <template> <canvas ref="fabricCanvas" width="500" height="500"></canvas> </template> </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) => { this.canvas.add(converted); this.canvas.renderAll(); }); </code></pre> </answer> </body></html>

jquery vue.js vuejs3 fabricjs

回答 0 投票 0

为 Fabric.js 加载自定义字体

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

fonts fabricjs

回答 1 投票 0

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

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

javascript html canvas fabricjs

回答 2 投票 0

将 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/>

javascript svg canvas fabricjs

回答 1 投票 0

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

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

javascript reactjs next.js fabricjs

回答 1 投票 0

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

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

html5-canvas fabricjs setbackground

回答 1 投票 0

Fabric js复制的对象在画布中缩放或旋转后被删除

我在画布中复制和粘贴对象时遇到问题。复制和粘贴功能本身按预期工作，但是，如果我在粘贴后尝试放大/缩小或旋转画布...