fabricjs 相关问题

Fabric.js / canvas 无限背景网格，如 miro

欢呼社区， 最后，我在 StackOverflow 上遇到了第一个问题，都是关于 Fabric.js 的“无限网格”——如果您对我的问题有任何反馈，请联系我！ 专业...

如何以将fabricCanvas序列化到文件时保留的方式向fabric js对象添加自定义参数

我无法向 Fabric-js 对象添加自定义参数。 我创建一个圆形对象： var CircleShape = new Fabric.Circle({ 半径：100， 填充：'#eef', 比例Y：0.5， originX: '中心', 原来...

如何去除可选择的中间顶角和边框

我是fabric js新手，正在尝试更改selectable的样式。 我想自定义可选。 在 CSS 之前 (https://i.stack.imgur.com/Kkrs0.png) 我把它改为 （https://i.stack.imgu...

ThreeJS 加载 GLTF 并使用 FabricJS 画布作为纹理

我正在构建一个盒子设计器工具，您可以在加载的 gltf 盒子的每个面上进行绘制。它有 10 个面，其中 5 个从顶部，5 个从底部。当我使用 BoxGeometry 时，它工作正常，但是当我发现...

Control.polygonPositionHandler 处未定义（读为“x”）

我有一个代码，可以使用 javascript 和 Fabric JS 绘制和编辑多边形。我希望它能工作成角度并尝试将其转换，但其他功能不起作用，而原始代码可以工作......

通过 JSON 加载 curveText 在 FabricJS 1.7.3 中不再起作用

我正在使用fabricjs的优秀插件“curvedText”，来自https://github.com/EffEPi/fabric.curvedText 这很好用，但是最近对 Fabricjs 的更新使该插件停止了...

Fabric.js - 为什么这个 svg 在导入到我的画布后质量这么差？

这是加载到画布上的 svg 图像。如您所知，它看起来非常像光栅图像。为了提供更多背景信息，浅蓝色框的尺寸为 1000 像素 x 400 像素。 另请注意...

fabric js 中的文本位于边界框之外

我使用fabric js 进行注释。我在添加特定字体系列的文本时遇到问题。当我添加文本时，它超出了边界框，这就是为什么外部的文本是

FabricJS：当我更改路径坐标时，路径的边界框不会更新

我们在处理结构中的路径时遇到问题，当用户拖动第一个点或最后一个点时，我们需要始终更改二次线（路径）的坐标，路径会更新...

如何更改fabric.js上的默认选择颜色？

如何更改 Fabric.js 上默认的蓝色选择颜色？我尝试更改 Fabric.js 中的这些行但没有效果： 选择颜色: 'rgba(17,119,255,0.3)', 选择边框颜色：'r...

在 HTML/CSS/JavaScript 中使画布响应式

我正在开发一个网页设计项目，尝试使用 HTML、CSS 和 JavaScript 创建响应式画布元素。 但我的方法都不起作用 const canvas = new Fabric.Canvas("

如何在FabricJS中编写用于边缘检测的卷积滤波器

我想在Fabricjs中编写一个用于边缘检测的卷积滤波器，但是矩阵不起作用。 这是矩阵（想法取自http://homepages.inf.ed.ac.uk/rbf/HIPR2/sobel.htm）： 新...

在 Fabric.js Canvas 中选择另一个对象时如何将对象保留在顶层？

我正在开发一个项目，其中使用 Fabric.js 库创建带有文本和图像的画布。我有一个要求，我想确保文本始终保留在顶层，甚至

fabric.js 中的自定义对象初始化

我有一个较旧的fabric.js 项目，我想对其进行现代化改造。 在此项目中，在对象初始化期间应考虑一些用户定义的属性。 下面的例子应该...

如何初始化画布并将其传递给其他函数？

我正在尝试将fabric.js 添加到空的Blazor 服务器端应用程序。我做了以下事情： 在_Host.cshtml中添加以下脚本 <p>我正在尝试将 <a href="http://fabricjs.com/" rel="nofollow noreferrer">fabric.js</a> 添加到空的 Blazor 服务器端应用程序。我做了以下事情：</p> <p>在<pre><code>_Host.cshtml</code></pre></p>中添加了以下脚本 <pre><code>&lt;script src=&#34;https://unpkg.com/fabric@latest/dist/fabric.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;~/js/ImageEditor.js&#34;&gt;&lt;/script&gt; </code></pre> <p>在<pre><code>wwwroot/js</code></pre>下创建此文件：</p> <pre><code>window.fabricFunctions = { setup: function() { var canvas = new fabric.Canvas(&#39;canvasId&#39;); // create a rect object var deleteIcon = &#34;data:image/svg+xml,%3C%3Fxml version=&#39;1.0&#39; encoding=&#39;utf-8&#39;%3F%3E%3C!DOCTYPE svg PUBLIC &#39;-//W3C//DTD SVG 1.1//EN&#39; &#39;http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd&#39;%3E%3Csvg version=&#39;1.1&#39; id=&#39;Ebene_1&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39; xmlns:xlink=&#39;http://www.w3.org/1999/xlink&#39; x=&#39;0px&#39; y=&#39;0px&#39; width=&#39;595.275px&#39; height=&#39;595.275px&#39; viewBox=&#39;200 215 230 470&#39; xml:space=&#39;preserve&#39;%3E%3Ccircle style=&#39;fill:%23F44336;&#39; cx=&#39;299.76&#39; cy=&#39;439.067&#39; r=&#39;218.516&#39;/%3E%3Cg%3E%3Crect x=&#39;267.162&#39; y=&#39;307.978&#39; transform=&#39;matrix(0.7071 -0.7071 0.7071 0.7071 -222.6202 340.6915)&#39; style=&#39;fill:white;&#39; width=&#39;65.545&#39; height=&#39;262.18&#39;/%3E%3Crect x=&#39;266.988&#39; y=&#39;308.153&#39; transform=&#39;matrix(0.7071 0.7071 -0.7071 0.7071 398.3889 -83.3116)&#39; style=&#39;fill:white;&#39; width=&#39;65.544&#39; height=&#39;262.179&#39;/%3E%3C/g%3E%3C/svg%3E&#34;; var img = document.createElement(&#39;img&#39;); img.src = deleteIcon; fabric.Object.prototype.transparentCorners = false; fabric.Object.prototype.cornerColor = &#39;blue&#39;; fabric.Object.prototype.cornerStyle = &#39;circle&#39;; return canvas; }, add: function (canvas) { var rect = new fabric.Rect({ left: 100, top: 50, fill: &#39;yellow&#39;, width: 200, height: 100, objectCaching: false, stroke: &#39;lightgreen&#39;, strokeWidth: 4, }); canvas.add(rect); canvas.setActiveObject(rect); } }; </code></pre> <p>将以下内容放入剃刀页面中：</p> <pre><code>@page &#34;/&#34; @inject IJSRuntime jsRuntime; &lt;div class=&#34;controls&#34;&gt; &lt;p&gt; &lt;button id=&#34;add&#34; @onclick=&#34;Add&#34;&gt;Add a rectangle&lt;/button&gt; &lt;/p&gt; &lt;/div&gt; &lt;canvas id=&#34;canvasId&#34; width=&#34;400&#34; height=&#34;300&#34; style=&#34;border:1px solid #ccc&#34;&gt;&lt;/canvas&gt; @code { private async Task Add() { var canvas = await jsRuntime.InvokeAsync&lt;object&gt;(&#34;fabricFunctions.setup&#34;); await jsRuntime.InvokeVoidAsync(&#34;fabricFunctions.add&#34;, canvas); } } </code></pre> <p>调用 <pre><code>setup</code></pre> 后，我确实有一个 <pre><code>canvas</code></pre> 对象，我将其传递给 <pre><code>add</code></pre> 函数。但是我在调用<pre><code>canvas.add(rect)</code></pre>时遇到异常，说明add不是canvas的函数。</p> <p>是否有更好的方法来在 javascript 代码中保留 <pre><code>canvas</code></pre> 的实例，而不是在方法中传递它？</p> </question> <answer tick="false" vote="0"> <p>看这里：</p> <p><a href="https://stackoverflow.com/questions/72351350/how-to-get-js-object-and-pass-it-back">如何获取JS对象并传回？</a>.</p> <p>如果您想通过引用将对象从一个 JavaScript 函数传递到另一个 JavaScript 函数，解决方法是创建一个 JavaScript 函数来直接执行此操作，例如：</p> <pre><code>setupAndAdd: function () { var canvas = this.setup(); this.add(canvas); } </code></pre> <p><strong>Blazor 组件：</strong></p> <pre><code>private async Task Add() { await JSRuntime.InvokeVoidAsync(&#34;fabricFunctions.setupAndAdd&#34;); } </code></pre> </answer> <answer tick="false" vote="0"> <p>您似乎面临一个问题，即传递给 <pre><code>canvas</code></pre> 函数的 <pre><code>add</code></pre> 对象未被识别为有效的 Fabric.js 画布实例。这可能是由于 JavaScript 和 Blazor 互操作的方式造成的。要解决此问题并改进代码的组织，您可以进行一些调整：</p> <p><strong>1.单独的JavaScript初始化：</strong> 将画布设置和任何其他相关初始化代码移至 <pre><code>ImageEditor.js</code></pre> 文件中。这样，您可以确保在 JavaScript 范围内正确创建和维护画布实例。</p> <p><strong>2。 Canvas 的全球范围：</strong> 不要从 <pre><code>setup</code></pre> 函数返回画布实例，而是在 JavaScript 范围内创建一个全局变量来保存画布实例。这将允许其他函数访问画布实例，而无需将其作为参数传递。</p> <p><strong>以下是修改代码的方法：</strong></p> <p>在<pre><code>ImageEditor.js:</code></pre></p> <pre><code>var canvas; // Declare a global variable to hold the canvas instance window.fabricFunctions = { setup: function() { canvas = new fabric.Canvas(&#39;canvasId&#39;); // Other initialization code return true; // Return a flag to indicate successful setup }, add: function() { var rect = new fabric.Rect({ left: 100, top: 50, fill: &#39;yellow&#39;, width: 200, height: 100, objectCaching: false, stroke: &#39;lightgreen&#39;, strokeWidth: 4, }); canvas.add(rect); canvas.setActiveObject(rect); } }; </code></pre> <p>在您的 Blazor 组件中：</p> <pre><code>@page &#34;/&#34; @inject IJSRuntime jsRuntime; &lt;div class=&#34;controls&#34;&gt; &lt;p&gt; &lt;button id=&#34;add&#34; @onclick=&#34;Add&#34;&gt;Add a rectangle&lt;/button&gt; &lt;/p&gt; &lt;/div&gt; &lt;canvas id=&#34;canvasId&#34; width=&#34;400&#34; height=&#34;300&#34; style=&#34;border:1px solid #ccc&#34;&gt;&lt;/canvas&gt; @code { private async Task Add() { var success = await jsRuntime.InvokeAsync&lt;bool&gt;(&#34;fabricFunctions.setup&#34;); if (success) { await jsRuntime.InvokeVoidAsync(&#34;fabricFunctions.add&#34;); } } } </code></pre> <p>这种方法将画布实例维护在 JavaScript 范围内，而不需要在函数之间显式传递它。请谨慎使用全局变量，因为它们可能会在更复杂的场景中导致意外行为。在这种情况下，由于您正在处理单个画布实例，因此它应该可以正常工作。</p> </answer> </body></html>

为什么选择fabricjs后top和left属性变成负数了？

在fabricjs中，画布内的所有对象都有自己的顶部和左侧属性，但是当我进行选择（使用shift+单击或拖动）时，

fabric.js：转换为 SVG 时处理对象文本及其路径

我在厨房水槽中使用这个 让drawCirclePath = (cx, cy, r) => { 返回 "M" + cx + "," + cy + "m" + -r + ",0a" + r + "," + r + " 0 1,0 &

如何在fabric.js中将线条锁定为水平/垂直

我想扩展fabric.Line类以确保它始终是水平或垂直的（取决于施工期间的选项） 我通过重写 setCoords 来确保这一点， 设置坐标（）{ 如果...

使用 <React.Strict Mode> 和 Fabric 的画布实例化重新渲染

我正在创建一个织物画布和按钮来实例化应该可选择的形状。我不明白为什么我的组件在以下场景中被重新渲染两次。因为这个...

Vercel Serverless Function 上的 Node-Canvas - Serverless Function 超过最大大小 50mb

在我的 Next.js 项目中，我使用 Fabric 和 Fabricjs-React 作为 Fabric 的包装器，以允许用户将图像放入我的画布中。现在fabric的依赖项之一恰好是node_modules/canvas/...