fabricjs 相关问题

Fabric.js是一个HTML5画布库，为画布提供了一个对象模型，一个SVG到画布的渲染器和一个画布到SVG的解析器。

如何使用fabricjs实现floodfill算法？

我有一个用于填充画布的算法。我正在尝试将其与 FabricJS 结合起来。所以这是一个困境......我创建了一个fabric.Canvas()。这会创建一个包装画布和一个上部c...

canvas fabricjs flood-fill fabricjs2

回答 1 投票 0

按扣面料。线成 45 度角

我正在尝试使用fabricJS中的fabric.Line()，以便当用户开始绘制一条线时，它会以与起点成45度角的方式捕捉到八个角度之一。这与持有类似

fabricjs

回答 3 投票 0

在视频顶部添加 FabricJS Canva

我想在视频顶部添加 FabricJS 画布，但无法将画布位置属性设置为“绝对”。 <p>我想在视频顶部添加 FabricJS 画布，但无法将画布位置属性设置为“绝对”。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script> <div id="videoKit"> <video id="video" controls preload="metadata"> <source src="https://media.istockphoto.com/id/1760658147/fr/vid%C3%A9o/prise-de-vue-par-drone-de-dauphins-nageant.mp4?s=mp4-640x640-is&k=20&c=y9709pLK1KmLp1FZRzkKd8Pmx4xurbRqAK6RWKLSapc=" type="video/mp4"/> </video> <canvas id="canvas"></canvas> </div> <script> var canvas = new fabric.Canvas('canvas', { width: 500, height: 500 }); var canvasNode = canvas.getElement(); canvasNode.style.position = 'absolute'; canvasNode.style.left = '0px'; canvasNode.style.top = '0px'; canvasNode.style.border = '2px solid #000'; </script></code></pre> </div> </div> <p></p> <p>我尝试更改初始画布、上部画布和下部画布以及 FabricJS 设置的画布容器的 CSS 属性。但我的画布仍在视频下方。</p> <p>我们可以正确地将 FabricJS 画布放在视频之上吗？</p> </question> <answer tick="false" vote="0"> <p>经过多次尝试，终于发现这个问题的原因是在css中</p> <p>如果您想按照自己的意愿定位canvas标签，则必须将父标签的position属性设置为“relative”，将video标签的position属性设置为“absolute”。</p> <p>这是我根据您的代码修改的代码。（已更改 2 行。）</p> <pre><code><div id="app"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script> <div id="videoKit" style="position: relative"> <video id="video" controls preload="metadata" style="position: absolute"> <source src="https://media.istockphoto.com/id/1760658147/fr/vid%C3%A9o/prise-de-vue-par-drone-de-dauphins-nageant.mp4?s=mp4-640x640-is&k=20&c=y9709pLK1KmLp1FZRzkKd8Pmx4xurbRqAK6RWKLSapc=" type="video/mp4" /> </video> <canvas id="canvas"></canvas> </div> <script> var canvas = new fabric.Canvas('canvas', { width: 500, height: 500, }); var canvasNode = canvas.getElement(); canvasNode.style.position = 'absolute'; canvasNode.style.left = '0px'; canvasNode.style.top = '0px'; canvasNode.style.border = '2px solid #000'; </script> </code></pre> <p>在我的电脑环境下测试后，确认运行正常。</p> <p>我希望这对您有帮助。谢谢:)</p> </answer> </body></html>

javascript html5-canvas fabricjs

回答 0 投票 0

fabricjs：如何在剪辑图像后调整边界框的大小

我有一个画布，我在其中加载图像，然后绘制一个矩形以选择图像的一部分，然后剪辑到该区域。一切都很好。然而，剩余图像的边界矩形是

fabricjs

回答 2 投票 0

FabricJs 中的长度测量与 Acrobat reader 使用相同

我需要在 Fabricjs 和 Angular 中制作与 Acrobat reader 使用相同的自定义长度测量对象。另外，我需要保留 Acrobat 中如何测量小距离长度的功能。添加...

angular typescript pdf fabricjs acrobat

回答 1 投票 0

fabric.js-如何选择内部矩形？

这里我有两个矩形。红色的似乎在绿色的里面。我想单击红色的，但 mouse:down 处理程序返回 options.target 作为绿色的。我该如何解决这个问题...