Fabric JS边界框以“拥抱”/环绕所选对象
Fabric JS是一个强大的HTML5 canvas库，用于创建交互式的图形和图像编辑应用程序。它提供了丰富的功能和工具，使开发人员能够轻松地处理图形对象、图像和文本。
边界框是指一个矩形框，用于表示一个对象的边界范围。在Fabric JS中，边界框可以用来确定一个对象的位置、大小和旋转角度。边界框可以通过拖动、缩放和旋转来调整对象的外观和位置。
“拥抱”或“环绕”是指边界框紧密地围绕所选对象，以适应对象的形状和大小。这种功能使得对象的边界框可以更好地与对象的外观和形状相匹配，提供更好的用户体验。
Fabric JS的边界框以“拥抱”/环绕所选对象的优势包括：
- 提供更准确的对象边界范围：边界框可以紧密地围绕对象，确保边界框与对象的外观和形状相匹配，提供更准确的对象边界范围。
- 支持对象的交互操作：通过拖动、缩放和旋转边界框，用户可以轻松地调整对象的位置、大小和旋转角度，实现交互式的对象操作。
- 提供更好的用户体验：边界框的“拥抱”/环绕功能可以提供更好的用户体验，使用户能够更直观地了解和操作对象。
Fabric JS中的边界框功能可以应用于各种场景，包括但不限于：
- 图形编辑应用程序：边界框可以用于选择、调整和操作图形对象，使用户能够轻松地编辑和修改图形。
- 图像编辑应用程序：边界框可以用于选择、裁剪和调整图像，使用户能够方便地编辑和修改图像。
- 文字编辑应用程序：边界框可以用于选择、调整和操作文本对象，使用户能够轻松地编辑和修改文本内容。
- 交互式绘图应用程序：边界框可以用于选择、调整和操作绘图对象，使用户能够方便地绘制和修改图形。
腾讯云提供了一系列与云计算相关的产品，其中与Fabric JS边界框功能相关的产品是腾讯云的云服务器（CVM）和云存储（COS）。
- 腾讯云云服务器（CVM）：提供了强大的计算能力和灵活的扩展性，可用于部署和运行Fabric JS应用程序。
- 腾讯云云存储（COS）：提供了高可靠性、高可用性和高扩展性的对象存储服务，可用于存储和管理Fabric JS应用程序中的图形、图像和文本数据。
您可以通过以下链接了解更多关于腾讯云云服务器和云存储的详细信息：
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云存储（COS）：https://cloud.tencent.com/product/cos
相关·内容
可以创建一个Fabric JS边界框，它不显示所选对象周围的矩形，而是显示一条“拥抱”所选对象的线。例如，当圆形对象被选中时，它周围会出现一个圆形边界框，其他更复杂的形状也会出现。我已经通读了文档，没有任何代码可以显示，因为我不确定如何开始解决这个问题。
浏览 24提问于2021-04-15得票数 0
默认情况下，我使用Fabric.js绘制路径，所选的事件只捕获与路径的边界框相交的按钮。这是有问题的，当您有多个路径，其边界框相互重叠，但路径本身是视觉上可区分的最终用户。
是否有做像素完美路径选择或选择最接近用户的路径点击？
浏览 2提问于2014-01-28得票数 1
回答已采纳
使用fabricjs，我绘制了一个多边形。并在多边形的每个点上放置点标记。现在，当用户拖动这个点标记时，我动态地操作各个多边形点，允许用户根据自己的需要修改多边形。
首先点击黑色多边形，你会看到选择框(边界框)，现在拖动任何绿色的点来修改多边形，在多边形被修改后，再次尝试点击黑色多边形，边界框/选择区域/可点击区域与上一次相同，但它应该包括新修改的多边形。
我试着在谷歌和这里搜索，只发现使用.setCoods()方法，但在这种情况下不起作用。
我使用的是3.6.3版本的fabricjs。
请帮帮忙。
/**
* fabric.js template for bug reports
*
浏览 1提问于2020-06-24得票数 2
想知道是否有一种方法可以通过边界框对齐FabricJ中的对象？
如果我发现某些东西落在某个间隔之间(假设是10px)，我会使用.setTop()属性将活动对象顶部指定为与可比较元素相同的顶部。
问题是TOP不是可以使用的right属性，因为不同元素的边界框顶部可能不同。例如，具有相同顶部但角度不同的两个元素将具有不同的边界框顶部...
希望你明白我的意思..。
var canvas = this.__canvas = new fabric.Canvas('canvas');
//fabric.Object.prototype.transparentCorners = fa
浏览 4提问于2017-12-12得票数 0
1回答
除了正在使用的FabricJS版本之外，下面的代码片段是相同的。
第一个使用1.4.13版本，第二个使用最新版本(1.7.3)。
在第一个版本上单击缩放在中时，黑色方框将保持左上角(0，0)。到现在为止还好。
在第二个版本中做同样的操作时，黑色方块“漂移”，在那里你可以看到上面和左边的黑色方块的粉红色背景。
有谁知道为什么这种行为发生了变化，是否有解决办法或其他解决办法？
var canvas = new fabric.Canvas('c');
canvas.setBackgroundImage('http://placehold.it/640x480/dd005
浏览 0提问于2017-02-02得票数 0
回答已采纳
1回答
参考下面的代码，我可以在画布框中来回拖动红线，并让它停在左边的极限处。但是这条线并没有停在右边的极限--它消失在盒子之外，如果我拖到左边，它就会重新出现。我看过制作演示(独立控件、PerPixel拖放、Stickman)，并注意到以类似的方式拖动对象是可能的。这是虚构的特性，还是有什么方法可以修复我的代码，使红线不能被拖过正确的限制？
var canvas = new fabric.Canvas('cnvs');
var leftLimit = 20;
var rightLimit = 400;
var redLine = new fabric.Line([leftL
浏览 4提问于2018-12-07得票数 0
回答已采纳
我使用的是fabric js，我只需要显示对象的边界框，而不是在拖动过程中显示整个对象。意思是说对象是固定的，直到我停止拖放。
浏览 0提问于2013-11-14得票数 1
回答已采纳
1回答
我正在尝试使用fabric.Path创建一个形状，并且我希望能够围绕它的中心旋转它。问题是，边界框是偏移的，而实际形状围绕其中心旋转：
this.canvas = new fabric.Canvas('c')
this.canvas.clear();
var triangle = new fabric.Triangle({
width: 20,
height: 20,
fill: '#35a2da',
left: 410,
top: 350,
angle: 90
});
var path = new
浏览 8提问于2013-02-18得票数 2
回答已采纳
我正在使用fabric.js库。我想垂直对齐文本到文本框区域的中心。请看图片。
在图像中，默认的光标是对齐到顶部，但我希望它居中。是否有像textalign这样的valign形式的文本属性
尝试了originY，但没有成功。
浏览 14提问于2018-03-05得票数 1
1回答
这可能更像是一个普通的javascript问题，而不是fabric.js问题。
我正在看Fabric.js "“演示。如果单击" object“选项卡，然后在左侧的绘图区域中选择一项，则控制面板将填充所选对象的属性，并且存在(或似乎是)单向绑定:控件面板中的更改将反映在所选对象中。
我需要实现这种控制面板，我不知道从哪里开始。我一直在查看该演示的页面源，但它非常密集。
有人能给我一个正确的方向如何开始这件事吗？是否涉及库或框架？我是不是想得太多了？我来自Flex/Actionscript背景，在那里做这类事情非常容易，而且我仍然被Javascript、‘m、CSS组合的密度搞砸
浏览 1提问于2017-03-01得票数 1
回答已采纳
使用屏幕截图中的fabric.js将SVG加载到画布中有问题，您将看到边界框和图标不重叠：
问题似乎来自SVG中的以下属性值：transform="translate(-255.7-577)"。
我很难( fabric.js)弄清楚如何调整SVG，这样就不会发生这种转换了。
任何指南，无论是特定于fabric.js的，还是只是一个本地画布方法，都将不胜感激。似乎找不出如何调整SVG对象中的路径。
浏览 1提问于2016-01-08得票数 1
回答已采纳
1回答
完全检测另一个对象内的对象
、、、、
大家好，
我想知道是否有一种方法可以检测到一个fabric对象是否完全在另一个对象中？
我在文档中查看了object.intersectsWithObject(object2)，但不幸的是，一旦对象完全在object2中，函数就不再返回true，而是返回false。
其他人有这个问题吗？我根本不知道该怎么做。我在fabric.js中搜索了这个函数。有人能帮忙吗？
intersectsWithObject: function(other) {
// extracts coords
function getCoords(oCoords) {
return {
t
浏览 0提问于2015-07-21得票数 1
回答已采纳
我想显示对象包围框当鼠标悬停在像这个视频对象，怎么做呢？
我使用canvas.on('mouse:over')和selectedObj.drawBorders函数。但是，大纲框的绘制位置不正确。当鼠标移出物体时，我不知道如何清除轮廓框。
这是我的代码：
$(function() {
var canvasObject = document.getElementById("editorCanvas");
// set canvas equal size with div
$(canvasObject).width($("#can
浏览 0提问于2019-05-16得票数 4
回答已采纳
我有文本框的文本“这是测试文本框”，我想设置下划线只字“测试”，而不是整个文本框文本。如何将下划线设置为子字符串？
var canvas = new fabric.Canvas('c');
var underlineText = new fabric.Textbox("This is test textbox", {
underline: true,
});
canvas.add(underlineText);
canvas {
border: 1px solid #999;
}
<script src="https://ra
浏览 0提问于2018-08-29得票数 0
回答已采纳
2回答
好的，如果我有以下的形状被旋转，然后被选中，你会看到它们的包围框：
我试图写一些代码来对齐对象之间的关系。因此，我想得到每个对象的“包含盒”。
我知道getBoundingRect，但是，对于上面的形状，这给了我以下几点：
因此，这些箱子对我没有多大用处。是否有一种标准的方法来获得我所说的“包含所有形状的盒子”？例如，我希望能够将下列框返回给我：
因此，对于任何给定的形状，我希望能够得到红色的边界矩形(没有旋转)。
显然，我可以为fabricJS中的每一个可能的形状编写一个例程，但我不希望重新发明轮子！有什么想法吗？
编辑这里有一个交互式片段，它显示当前的边界框(红色)：
浏览 1提问于2017-03-15得票数 4
回答已采纳
在原生HTML5画布中，文本由文本基线定位，但在Fabric.js中，文本似乎位于文本的底部。我想让Fabric.js根据基线来定位文本。有可能吗？
请参阅
这是示例中使用的代码。
Fabric.js<br />
<canvas id="fabric" width="300" height="300" style="border:1px solid #d3d3d3;"></canvas>
<script src="fabric.js"></script>
浏览 9提问于2015-01-22得票数 2
1回答
我有一个用Fabric js构建的画布。我需要在鼠标按下事件的点击坐标上绘制1x1像素的矩形。当在画布中单击时，如果画布之前已转换，则必须转换该点。为了做到这一点，我使用了以下方法：
const point = new fabric.Point(offsetX, offsetY);
const invertedMatrix = fabric.util.invertTransform(canvas.viewportTransform)
const transformedPoint = fabric.util.transformPoint(point, invertedMatrix);
在转换点之
浏览 10提问于2018-11-24得票数 0
1回答
我想在fabric.js或fabric.curvedText.js中使用css属性"-webkit-transform“，我想在画布上显示文本，如：http://trentwalton.com/2011/05/10/fit-to-scale/。
-webkit-transform: skewY(-15deg);
此css属性用于显示文本，如上面的链接所示。
我在fabric.curvedText.js中添加了这个属性，就像添加其他属性一样，例如:间距、半径等。
下面是添加-webkit-transform的修改代码--该属性代码的其余部分与fabric.curvedText.js中的相
浏览 9提问于2013-12-03得票数 2
回答已采纳
我有一个用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,
浏览 787提问于2018-07-06得票数 5
回答已采纳
开始使用fabric.js，并尝试在另一个画布中添加一个画布，这样顶层画布保持不变，我将向内部画布添加对象。
下面是将画布添加到另一个画布的片段。
canvas = new fabric.Canvas('artcanvas');
innerCanvas = new fabric.Canvas("innerCanvas");
canvas.add(innerCanvas);
我的html看起来像这样
<canvas id="artcanvas" width="500" height="500"><
浏览 17提问于2017-06-08得票数 14
回答已采纳
我有一个问题，织物文本框:用户不能选择TextBox &编辑值。使用函数canvas.MoveTo将云图设置为索引2，文本框设置为索引7，我预计TextBox在图像的上方，但实际上，文本框总是显示在云图后面。
这是我的密码
var canvasObject = document.getElementById("editorCanvas");
// set canvas equal size with div
$(canvasObject).width($("#canvasContainer").width());
$(canvasObject).he
浏览 1提问于2018-11-07得票数 0
回答已采纳
我可以使用Fabric.js将图片添加到画布中。
然而，我有一个固定的宽度和高度的图像框。
图像将动态添加，其宽度和高度将有所不同。
为了使它一致，我想在中间裁剪图像，以适应图像框的宽度和高度。
我如何使用Fabric.js实现这一目标？
样本图像
这是我的代码：
let newObj = {
"version": "4.6.0",
"objects": [{
type: 'image',
version: '4.6.0',
originX:
浏览 22提问于2022-05-23得票数 0
我在fabric.js上遇到的问题似乎很简单，但我一直在寻找一个没有任何运气的解决方案，所以我来了
我创建了一个简单的组来绘制一个箭头，由一个线对象和一个放置在其端点的旋转三角形组成。这很好，但是当我动态更新直线的笔画宽度和三角形的宽度/高度时，组的边界框不会更新以匹配新的维度。下面是结果的图像：
这是一个现场演示。只要拖动滑块以改变行程宽度和三角形大小，您就会看到问题。
let canvas = new fabric.Canvas(document.querySelector('canvas'), {
backgroundColor: '
浏览 1提问于2020-08-05得票数 1
回答已采纳
我有一个自定义对象(fabric.DefaultSensorGroup)，它基于fabric.Group。这个自定义对象包含一个fabric.Text和各种数量的其他自定义对象(fabric.DefaultSensor)。
如果我向组中添加/删除对象，则该组的“边框”不会根据包含的对象调整大小。
DefaultSensor:
fabric.DefaultSensor = fabric.util.createClass(fabric.Group, {
type : 'defaultSensor',
initialize : function(options) {
浏览 1提问于2015-03-10得票数 2
我正在尝试显式地将文本设置为文本框，在旧的object.setText("something")版本中。
在fabric js版本2中起作用，但不起作用。在这个版本中引入了其他方法吗？
var canvas = new fabric.Canvas('c');
var text1 = new fabric.Textbox('Text', {
left: 10,
top: 20,
width: 300
})
canvas.add(text1);
canvas.on('text:changed', function(
浏览 2提问于2018-02-03得票数 5
回答已采纳
我正在开发一个使用Fabric.js的对象绘图画布，在尝试处理线条时遇到了一些奇怪的问题。为了清楚起见，我创建了一个非常简单的jsfiddle来显示我所看到的内容。它是一个事件检查器，用来检查鼠标是在一条线上，还是在一个正方形上，还是什么地方都没有。如果你愿意，这些物体是可以移动的，固定物体也是一样的。正如您所看到的，如果您尝试在正方形周围放置鼠标，它只会在您实际将指针放在正方形上时触发一个事件。当你试图靠近这条线时，情况发生了变化，我们看到一个更大的区域触发了这个事件。我是不是犯了一些小错误，是个bug，还是我没有想到的其他事情？感谢大家的关注 var canvas = new fabri
浏览 46提问于2021-01-28得票数 0
我想在文本框中添加类，如何使用fabric.js添加
canvas.set('class'，'textbox1')；
现在我在这里使用canvas.set(' class '，'textbox1')；来添加任何类。
提前谢谢。
浏览 1提问于2018-01-16得票数 0
2回答
我有有限的2D空间，两边都有包裹的坐标(我的意思是，左转会绕到右边的边缘，相同的方向是向上/向下)。
我还有一套盒子和斧头对齐。这些盒子在空间内有浮动坐标。
问题:找到最小的包围盒与轴对齐，包围所有的盒子。包装箱可以被包裹起来。
示例：
(粉红色表示空间边界，红色框需要封闭，蓝色边框表示尽可能小的边框)
浏览 1提问于2017-02-14得票数 1
回答已采纳
在我的网站上，我不想捆绑，而是直接使用ES6模块(为观众工作)
我尝试通过以下方式导入fabric.js
import {fabric} from "../node_modules/fabric/dist/fabric.js";就像我在捆绑时所做的那样(对于包来说，它工作得很好)。
然而，当我开始这个网站的时候
“未指明的SyntaxError:请求的模块‘./node_ does /fabric/dist/figur.js’不提供名为”fabric“的导出。”
如果我将上面的内容更改为import * as FAB from "../node_modules/
浏览 0提问于2019-08-29得票数 6
回答已采纳
我正在尝试在我的outlook外接程序中创建一个。在加载office脚本时，我从对话框的浏览器控制台得到了这个错误。该对话框包含一个简单的html页面，标题中包含jquery和office脚本引用。
TypeError: can't redefine non-configurable property "context" outlook-web-16.01.js:19:9756
ObjectOrReflectDefineProperty self-hosted:1762
defineProperty self-hosted:1813
defineNon
浏览 22提问于2020-06-07得票数 0
回答已采纳
我在对画布上的多个对象进行分组时遇到了问题。当我使用按住shift键选择对象时，如果我对这些对象进行分组，则新添加的组对其项的z索引不正确。请运行片段波纹管以了解问题。请先选择绿色框，然后选择蓝色，然后选择红色，同时按下shift键。然后单击“组”按钮查看问题。
canvas = new fabric.Canvas('canvas', {
isDrawingMode: false,
preserveObjectStacking: true
});
fabric.Object.prototype.objectCaching = true;
canvas.se
浏览 4提问于2017-08-02得票数 0
回答已采纳
我是Fabric.js的新手。
我想在画布内显示一个可移动/可调整大小的矩形，但限制用户操作，使其不能在画布外移动/放大。
有没有一种简单的方法来设置这些约束？是否需要手动检测画布边界？
浏览 2提问于2013-12-18得票数 2
我正在尝试获取所选对象的大小和类型。
下面是我的最小示例：
var canvas = new fabric.Canvas("c");
canvas.on("object:selected", onObjectSelected);
$("#addTxt").on("click", function(e) {
text = new fabric.Text("Insert Text here", {
left: 100,
top: 100
});
canvas.add(text);
}
浏览 1提问于2022-07-15得票数 1
回答已采纳
1回答
请参阅下面的链接。
请运行示例代码。
1长方形-分组。成功。
单击addRect两次。(显示两个矩形)
拖动和选择两个对象。
单击组按钮。
成功团体对象。
2子类对象-失败。
单击addLabeledRect两次(显示两个子类对象)--只有带有文本的矩形
拖动和选择两个对象。
单击组按钮。
控制台上的失败和错误消息。
子类对象不被转换为组对象？
我用子类对象和矩形测试了组对象。当矩形很好地分组时，子类对象则不是。
我使用v1.4.4
错误消息在下面。
Uncaught TypeError: undefined is not a function
浏览 0提问于2014-04-11得票数 1
回答已采纳
2回答
我使用fabric.js来操作添加到画布上的图像。我有个影子，但我希望它在图像周围。我现在拥有的是下面，但是。我做错了什么导致阴影不显示？
var canvas = new fabric.Canvas('canvas');
document.getElementById('file').addEventListener("change", function(e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = functi
浏览 2提问于2018-02-12得票数 1
回答已采纳
假设我有一个HTML5画布(在本例中使用fabric.js)，并且我想更改画布上的光标，以表示所选择的画笔大小和颜色。我认为应该有一种方法可以通过使用JS动态更改SVG的属性(大小和颜色)来实现这一点，这样我们就不必使用多个图像。如果这是可能的，有什么想法吗？
var canvas = new fabric.Canvas(c, {
isDrawingMode: true,
freeDrawingCursor: 'url("img/cursor.svg"), auto'
});
浏览 36提问于2016-08-18得票数 3
回答已采纳
1回答
编辑，见问题的结尾.
在我的应用程序中，我有两个画布元素。一个显示分层、透明的pngs，另一个从文件输入中获取图像并屏蔽它。选择的图像在没有蒙面的地方是透明的。然后将此图像转换为dataUrl，转换为适合于第一个画布，并添加为第一个画布的顶层。
在桌面浏览器上一切正常工作: Chrome，Safari。我只在加载时添加它，因此我确保不会出现任何竞赛条件。
在Android和Safari iOS上，画布转换的todataURL是透明的。如果我在第二个画布上添加一个不透明的图像，渲染的图像甚至会显示在移动设备上。
为了检查一下，我在身体上添加了据称透明的帆布。它在桌面上显示正确，但在移动浏览器上是
浏览 0提问于2018-04-03得票数 0
回答已采纳
我在用fabric.js。我想得到矩形的尺寸(“包围框”是正确的术语吗？)它准确地包含文本(由下面的红色框表示)。即使我将填充更改为0，默认的fabric.js框也有填充。
我试图从fabric画布中获取上下文，然后调用.measureText()，但是它没有给出包围框所需的全部信息。
编辑：
IText对象似乎有几个组件:容器、选择区域和文本本身。在下面的图像中，IText框是浅蓝色线。选择区域是浅蓝色填充。--红色框是我需要的.它正是包含文本本身的区域(在这样一个矩形和文本最极端的部分之间连一个像素都没有)。方法getBoundingRectHeight和getBoundingR
浏览 3提问于2015-10-02得票数 3
我在我的应用程序中使用了几个自定义fabric.js类来呈现和封装一些额外的数据属性。
现在我有了由它们生成的JSON数据，我想渲染画布，并使用node.js和fabric的npm包将其写入服务器上的PNG图像。这在内置的fabric类(如fabric.Rect或fabric.Text )中工作得很好，但我的定制总是抛出奇怪的require错误。
基本上，自定义文件如下所示：
fabric.custom.js
// without this node raises "fabric is not defined" error
var fabric = fabric || {};
浏览 6提问于2013-02-11得票数 0
我正在使用面料v2.4.3在一个角6项目。在我的项目中，我想通过鼠标和通过表单编辑属性来移动和调整一些对象( fabric.Group)的大小。
问题在于第二种方法。
我把一个物体放进画布里，然后用鼠标选择了它。现在，我订阅了表单valueChanges，以便实时应用所选对象的新道具。
this.subscription = this.form.valueChanges.subscribe((value)=>{
this.panelView.setConfig(value);
})
这是setConfig方法：
setConfig(config:PanelParameters){
浏览 1提问于2018-11-29得票数 0
回答已采纳
我想在画布上检查所选图像的图像质量。
我的以下代码：
var canvas = $(".canvas-container").children('canvas').get(0);
//console.log(canvas.getActiveObject().get('type'));
console.log(canvas);
getActiveObject()日志给出一个错误:未定义不是一个函数。
另一个日志返回：
<canvas class="lower-canvas" width="850" height
浏览 2提问于2014-11-19得票数 2
你能帮我弄清楚这是怎么回事吗？
基本上，我想将FabricJS与ReactJS和Redux结合使用。我想将当前选定的对象存储在redux存储中。但是，当涉及到保存多个选择的活动对象时，它似乎有一种奇怪的行为。
let selectedObjects = null;
let canvas = new fabric.Canvas('canvas-area', {
preserveObjectStacking: true,
width: 500,
height: 500
});
canvas.add(new fabric.Rect({
left: 100,
浏览 1提问于2018-08-02得票数 0
perPixelTargetFind是否与freeDrawingBrush创建的对象一起工作？对于指定cornerColor等，我可以选择自由绘制的对象，但只能通过边框来选择，而控件是默认的。
(我已经有一段时间没有和Fabric.js合作过了，很抱歉，如果这是一个过于基本的问题。另外，当我在这里时: Fabric.js文档的“用户友好”形式是否比中存在的JSDocs更多？这些文档都很好，但是很难获得属性的概述，除非通过滚动整个页面)
我的PencilBrush是这样创建的：
this.object = new fabric.PencilBrush(this.canvas, {
wid
浏览 3提问于2020-04-24得票数 1
回答已采纳
在fabric.js中，您可以使用
objects = canvas.getObjects('line')
但是我有一些对象，它们是、rect、和text的一组。
我如何标记这些项目，并将其作为一个组来获取？我不能选择所有的组，因为还有其他类型的组。
这是我的分组对象
var profilepic = new fabric.Rect({
originX: 'center',
originY: 'center',
fill: "#000",
opacity: 0.7,
浏览 0提问于2018-12-05得票数 1
回答已采纳
2回答
将用户计算机中的图像添加到画布
、、、、
我正在开发一个允许用户创建动态幻灯片的web应用程序。目前，无论如何将计算机用户的图像添加到画布上，我都遇到了一个问题。我正在使用输入按钮从计算机获取文件，它调用一个函数，该函数将图像添加到画布中。
到目前为止，我已经尝试了不同的方法将图像添加到画布中，就像下面这种方法一样：
但是这里显示的代码在我的例子中不起作用，因为它只是将图像绘制到画布中，但它不允许它像Fabricsjs中的Kitchensink.js演示那样可拖动和可调整大小。
我还尝试将图像转换为Base64，并使用LoadJSON将其转换回来，但我遇到了以下错误：
Uncaught TypeError: Cannot read p
浏览 0提问于2013-03-05得票数 8
回答已采纳
我使用FabricJS来允许用户在浏览器中设计SVG。当我希望保存时，我尝试使用OpenType JS来使用OpenType将文本框(Fabric)转换为SVG路径。
我看到的问题是，我的文本框的位置没有转换到画布上的新路径。
和
当我将新路径添加到画布中时，调用toSVG()它将消失在我保存的SVG中。
代码：
async function convertTextToPaths() {
ungroup();
var _all = canvas.getObjects();
for(i=0;i<_all.length;i++) {
浏览 26提问于2022-05-04得票数 2
回答已采纳
我最近开始在一个项目中使用Fabric.js，它非常棒。它为画布提供了一个抽象层，并有一个完整的“对象操作层/掩码”伴随着每个对象。
我想更进一步，利用它来制作实际的图表，对象之间的连接，以及每个对象附带的更多“元数据”。已经有人这么做了吗？Fabric.js是这方面的正确选择吗？
有没有想过如何在两个对象之间创建“连接器”对象，以响应它们所附加到的对象的事件？
浏览 7提问于2013-06-27得票数 8
在这里，我们在fabric.js中使用创建设计tool.We为fabric.js中的画布对象创建自定义选择区域。我在fabric.js中阅读了源代码，它为边界框生成方框，但我希望更改我的自定义。选择区域外观。有人能告诉我吗？
我们要定制选择区域的外观。
我们已经为选择区域尝试了这个代码context.setLineDash()。
if (fabric.StaticCanvas.supports('setLineDash') === true) {
ctx.setLineDash([4, 4]);
}
参考.But的代码，我的工作区域不会正常工作。
这
浏览 7提问于2016-12-19得票数 5
回答已采纳
2回答
当我单击一个圆时，在circle.How周围创建矩形，我能移除它吗？
var canvas = new fabric.Canvas(document.getElementById('c'));
var rect = new fabric.Rect({
width: 100,
height: 100,
left: 50,
top: 50,
fill: 'rgba(255,0,0,0.5)'
});
var circle = new fabric.Circle({
radius: 50,
left: 175,
浏览 0提问于2015-03-30得票数 1
回答已采纳
1回答
在序列化时，是否有一种方法可以包含fabric.Group的fabric.Group属性？
下面是带有序列化的fabric js组的链接。
JS Fiddle link：
我正在使用最新版本的fabric js库，即1.7.19。
subTargetCheck更新：我所做的是在序列化时包含。
canvas.toJSON(['subTargetCheck']);
因此，当我检查反序列化时，包含了subTargetCheck属性。但是当我试图移动画布上的织物组时，我遇到了一个错误。
错误是：
Uncaught TypeError: Cannot read property '
浏览 0提问于2017-11-09得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
