fabricjs 相关问题

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

在此 jsfiddle 中，我有一个使用 lockRotation: true 创建的 Fabric.js 文本，以避免旋转。这条线消失了，但是旋转框仍然存在，如何去掉它？超文本标记语言在此 jsfiddle 中，我使用 lockRotation: true 创建了 Fabric.js 文本以避免旋转。线条消失了，但是旋转的框控件还在，怎么去掉呢？ HTML <canvas id="c" width="300" height="300"></canvas> Javascript var canvas = new fabric.Canvas('c'); var text = new fabric.IText('This is the text',{ left: 50, top: 50, fontFamily: 'Arial', fontWeight: 'normal', fontSize: 18, lockRotation: true, stroke: 'black', fill: 'black' }); 接受的答案对于 Fabricjs 4.0 版本不再有效（请参阅changelog）。 hasRotatingPoint 已被删除，以支持更全面的控件 API，尽管它的文档仍然非常薄弱。要对特定对象隐藏某个控件，您必须重新定义其 controls 属性。以下是隐藏 mtr 控件（旋转）的方法： text.controls = { ...fabric.Text.prototype.controls, mtr: new fabric.Control({ visible: false }) } var canvas = new fabric.Canvas('c'); var text = new fabric.IText('This is the text',{ left: 50, top: 50, fontFamily: 'Arial', fontWeight: 'normal', fontSize: 18, stroke: 'black', fill: 'black' }); text.controls = { ...fabric.Text.prototype.controls, mtr: new fabric.Control({ visible: false }) } canvas.add(text); <script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script> <canvas id="c" width="300" height="300"></canvas> 在这里，我们使用文本的默认控件创建一个新的控件对象，但重新定义 mtr 集。使用 object.hasRotatingPoint = false;隐藏旋转点。 var canvas = new fabric.Canvas('c'); var text = new fabric.IText('This is the text',{ left: 50, top: 50, fontFamily: 'Arial', fontWeight: 'normal', fontSize: 18, hasRotatingPoint: false, stroke: 'black', fill: 'black' }); canvas.add(text); <script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script> <canvas id="c" width="300" height="300"></canvas> 使用setControlsVisibility，它适用于fabricjs的所有对象类型 fabric.Image.fromURL(src, (img) => { var oImg = img.set({ left: 0, top: 0, }) oImg.setControlsVisibility({ mtr: false }) canvas.add(oImg) canvas.setActiveObject(oImg) canvas.renderAll() } let newtext = new fabric.Textbox(text, { left: 0, top: 0, originX: 'center', originY: 'center', fontFamily: 'Inter', fill: '#fff', textAlign: 'center',} ) newtext.setControlsVisibility({ mtr: false }) canvas.add(newtext) canvas.setActiveObject(newtext) canvas.renderAll() 有时禁用对象旋转还不够。人们仍然可以选择多个对象，并且旋转控制点会再次显示。您可能还想禁用组轮换 fabric.Group.prototype._controlsVisibility = { tl: true, tr: true, br: true, bl: true, ml: false, mt: false, mr: false, mb: false, mtr: false };

fabricjs

回答 4 投票 0

fabricjs 在模拟移动触摸设备时无法正确渲染

我使用 Threejs 来管理画布（canvas0）（例如，放大/缩小和平移）并使用 Fabricjs 进行注释（canvas1）。当使用鼠标事件时，这在 Chrome 浏览器中工作得很好，但是......

fabricjs

回答 1 投票 0

如何使用 Threejs 和 Fabricjs 管理画布

我的应用程序使用 Threejs 来管理画布。例如，放大/缩小和平移。我还添加了fabricjs进行注释。该应用程序的工作方式是它有一个“渲染器”元素......

three.js fabricjs

回答 1 投票 0

在 Fabric JS 上用鼠标绘制虚线边框

当鼠标悬停在fabric js组件上时，我需要添加这种破折号边框。我想用鼠标移出事件清除它我该如何处理？有什么建议吗？我尝试过罢工，它有效，但是......

canvas fabricjs

回答 1 投票 0

在Fabric.js中有没有办法让透明对象带有阴影？

我的最终目标是拥有一个模糊的多边形对象。由于没有针对对象的滤镜，只有图像，我想我可以使对象透明并使用模糊的阴影： const Poly = 新面料.Po...

javascript canvas fabricjs

回答 1 投票 0

Fabric JS 背景图片大小问题

因此，有多种方法可以加载画布背景图像，但在我的代码中，我像这样加载它： var canvas = new Fabric.Canvas('canvas', { backgroundImage: " 因此，有多种方法可以加载画布背景图像，但在我的代码中，我像这样加载它： var canvas = new fabric.Canvas('canvas', { backgroundImage: "<?php echo $image; } ?>", } 在我发现的教程中（https://www.tutorialspoint.com/how-to-create-a-canvas-with-background-image-using-fabricjs）它展示了如何设置画布高度和宽度，例如所以： canvas.setWidth(document.body.scrollWidth / 2.2); canvas.setHeight(650); 但是我需要调整背景图像本身而不是整个画布的大小，而且我在网上找不到任何描述如何执行此操作的地方。从逻辑上讲，当我最初设置画布背景图像时应该设置如下所示： var canvas = new fabric.Canvas('canvas', { backgroundImage: "<?php echo $image; } ?>", backgroundImageWidth: "50%", backgroundImageHeight: "100%",} 但这不起作用，我尝试了其他一些方法，例如 setBackgroundImageWidth: 或 backgroundSize: 等......只是在黑暗中拍摄。我找不到任何描述以这种方式设置背景图像大小的 stackoverflow 问题。有谁知道该怎么做吗？无法在fabricJS 的构造函数中指定背景图像的尺寸。当您从 URL 加载图像时，您必须利用 Image 类的 fromURL() 方法来实例化 FabricJS Image，然后您可以将其与 backgroundImage 属性一起使用。 fromURL() 方法接受一个回调函数，该函数应该负责图像的实际大小调整。不幸的是，你不能简单地改变宽度和高度，因为 FabricJS 在内部锁定了宽高比。相反，您必须计算所需的宽度和高度作为比例，并使用图像的 .scaleX 和 .scaleY 属性。这是一个例子： let canvas = document.createElement("canvas"); document.body.appendChild(canvas); let canv = new fabric.Canvas(canvas, { backgroundColor: 'rgba(230, 230, 230, 1)', backgroundImage: fabric.Image.fromURL("https://picsum.photos/id/237/400/300", (img) => { img.scaleX = canv.width * 0.5 / img.width; img.scaleY = canv.height * 0.5 / img.height; canv.backgroundImage = img; canv.renderAll(); }) }); <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>

javascript css canvas fabricjs

回答 1 投票 0

fabric.js 库中画布内矩形块的正确移动

必须确保块无论宽度和长度如何都不会相互重叠，并且在移动和调整大小时不会超出画布的边界。块可以是 e...

javascript algorithm canvas fabricjs

回答 1 投票 0

如何在Fabric.js v5中实现透明文本带背景效果/文本抠图

我想向我的编辑器添加一个效果，用户可以在其中添加类似于下图的文本剪切效果有没有人可以帮助我，任何帮助将不胜感激！！！！

javascript html jquery fabricjs

回答 1 投票 0

使用fabric.loadSVGFromString 将 SVG 内容加载到 Fabric.js 时出现问题

我在使用fabric.loadSVGFromString 方法将SVG 内容加载到Fabric.js 时遇到问题。尽管有一个有效的 SVG 字符串，回调中加载的对象数组似乎...