标签: fabricjs2

注意:我已经提出了SO问题,但它对我的情况没用,因为

1)我试图维持以前的边界,但截至目前它在缩放时重新计算边界.

我添加了下面的代码,以在缩放对象时自动停止增加边框.现在问题是我已经为对象添加了一个5px边框,但是当缩放对象时,它不会保留我之前添加的边框.

canvas.on('object:scaling', (e) => {
  var o = e.target;
  if (!o.strokeWidthUnscaled && o.strokeWidth) {
    o.strokeWidthUnscaled = o.strokeWidth;
  }

  if (o.strokeWidthUnscaled) {
    o.strokeWidth = o.strokeWidthUnscaled / o.scaleX;
  }
});

现在我想要的是防止在缩放对象时增加边框.边界应该保持原样.

这是片段/ Codepen

var canvas = new fabric.Canvas('canvas1');

$('.add_shape').click(function() {
  var cur_value = $(this).attr('data-rel');
  if (cur_value != '') {
    switch (cur_value) {
      case 'rectangle':
        var rect = new fabric.Rect({
          left: 50,
          top: 50,
          fill: '#aaa',
          width: 50,
          height: 50,
          opacity: 1,
          stroke: '#000',
          strokeWidth: 1
        });
        canvas.add(rect);
        canvas.setActiveObject(rect); …

我正在对对象应用过滤器(在图像过滤器演示之后)并且一切正常但在我保存并加载画布后,图像过滤器会更改索引.

目前我有四个过滤器,它们通过索引应用(如演示中所示).

0:灰度

1:反转

2:去除颜色

3: - 混合颜色

因此,如果我应用灰度和删除颜色,'filters'数组看起来像这样,索引0和2是正确的...

但是在我加载画布(使用loadFromJSON)之后,对象的'filters'数组看起来像这样,索引重置...

有什么办法可以加载对象并保留过滤器索引吗？有一些代码依赖于此,当我加载具有带过滤器的对象的画布时,它会导致错误.

我尝试在创建对象时应用以下内容......

   oImg.filters = [
     false,
     false,
     false,
     false
   ];;

在创建对象时它可以正常工作......

但是当它被加载时,错误索引被删除并且它的结果相同......

In fabric.js, we can draw free hand paths (http://fabricjs.com/freedrawing) (http://fabricjs.com/fabric-intro-part-4#free_drawing)

(Yes I've already seen this post and it doesn't solve or reference my problem)

What I'm trying to achieve is showing the fill as the user is drawing. Not just when the path is created (as seen in the demo below) which it also sets that fill for all the other paths drawn which I don't want. I ONLY want the fill to apply only to …

我试图在较旧的fabricjs版本中将文本明确设置为文本框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(e) {

 var objTEmp = e.target;
 objTEmp.setText("some");

    
});

canvas{
 border:1px solid #000;
}

<script type="text/javascript" src="
https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.0.0-rc.4/fabric.js"></script>
<canvas id="c" width="400" height="400" style="border:1px solid #000000;"></canvas>

我一直在使用 fabricjs 来创建绘图工具。有一个大图像作为画布背景和平移功能。用户可以在画布上拖放对象。但是当我们平移画布时，没有选择画布上的对象放置。

要检查问题，请在视口下部拖放圆圈，然后将画布向上平移到一半，然后检查放置在画布上的对象是否不可选择。甚至认为如果您尝试将对象移动到视口外，它将无法选择。

var canvas = new fabric.Canvas('c', {
  selection: false
});
canvas.perPixelTargetFind = true;
canvas.targetFindTolerance = 4;

fabric.Image.fromURL('https://image.ibb.co/gFtpp7/8c39a3193e05996911c0d9c1df001a80.jpg', function(img) {
  var imgObj = img.set({
    left: 0,
    top: 0,
  });
  imgObj.scaleToWidth(canvas.width);
  canvas.width = imgObj.width;
  canvas.setBackgroundImage(imgObj, canvas.renderAll.bind(canvas));
});
var drawingPointer = {
  status: false,
  previousObj: false
};

function handleDragStart(e) {
  var draggables = document.querySelectorAll('#manholes div.drag-obj');
  [].forEach.call(draggables, function(img) {
    img.classList.remove('img_dragging');
  });
  this.classList.add('img_dragging');
}

function handleDragOver(e) {
  if (e.preventDefault) {
    e.preventDefault(); // Necessary. Allows us to drop.
  }
  e.dataTransfer.dropEffect = 'copy'; // …

我有一个名为ImageContainer的自定义组件，该组件基本上创建一个矩形并将图像用作填充图案。

在画布上运行toDataURL函数时，出现js错误

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

我试图实现的结果应该创建一个png数据，并将其作为src应用于图像标签。

知道如何解决吗？特纳克斯

https://jsfiddle.net/redlive/a444p13x/

使用 fabric js 构建多人涂鸦。

尝试使用 fabric js 实现多人涂鸦，想法是当 U1 在画布上绘制时，我们将点推送到 RTDB 并在客户端上获取这些点，并以编程方式在两个客户端中绘制笔画。

我目前有这个代码

fabric.IText.prototype.keysMap[13] = 'onEnterKeyPress';
fabric.IText.prototype.onEnterKeyPress = (e) => {
  console.log('onEnterKeyPress', e);
  // this.insertChars(e);
  // fabric.IText.insertChars(e);
  // return true;
  // return e;
};
  
let canvas = new fabric.Canvas('canvas', {
  preserveObjectStacking: true,
  width: 980,
  height: 600
});

let itext = new fabric.IText(
  'Edit this text',
  {
    editable: true,
    left: 100,
    top: 100,
    fontSize: 24
  }
);

canvas.add(itext);
canvas.requestRenderAll();

<html>
  <body>
    <canvas id="canvas"></canvas>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.4/fabric.min.js"></script>
  </body>
</html>

问题是，一旦我附加了按键侦听器，如果我按 Enter 键，它确实会触发我的函数回调，但不会在文本中添加回车符。

如果我删除按键侦听器，它会恢复正常，即在输入按键时添加回车符。

当我附加按键监听器时，似乎必须手动添加回车符？不知道该怎么做。

提前致谢。

顺便说一句，我正在使用最新的 FabricJS 2.3.4

嗨，我想用 FabricJS 只为选定的文本及其背景着色。事实上，带有 FabricJS 的文本字母如下：

正如他们的网站演示中所展示的那样。

但我想不出一种方法来重现它。我尝试obj.set("textBackgroundColor", "red")只为所选字母的背景着色，但它始终为整个文本的背景着色。

我试过obj.setColor("red")只给选定的字母上色，但它总是给文本的所有字母上色。这是我的jsfiddle

请问我错在哪里？

提前谢谢了。

当鼠标悬停在像这个视频这样的对象上时，我想显示对象边界框，该怎么做？

我正在使用带有selectedObj.drawBorders函数的canvas.on('mouse:over')。但是，轮廓框绘制的位置不正确。当鼠标移出对象时，我不知道如何清除该轮廓框。

$(function() {
		
		var canvasObject = document.getElementById("editorCanvas");

		// set canvas equal size with div
		$(canvasObject).width($("#canvasContainer").width());
		$(canvasObject).height($("#canvasContainer").height());

		var canvas = new fabric.Canvas('editorCanvas', {
			backgroundColor: 'white',
			selectionLineWidth: 2,
			width: $("#canvasContainer").width(),
			height: $("#canvasContainer").height()
		});
		
		canvas.viewportTransform[4] = 20;
    	canvas.viewportTransform[5] = 40;
		
		canvas.on('mouse:over', function(opts) {
			var selectedObj = opts.target;
			if (selectedObj != null) {
				selectedObj.drawBorders(canvas.getContext())
			}
		});
		
		var text = new fabric.Text('hello world', { left: 50, top: 50 });
		canvas.add(text);
		
		setObjectCoords();
		
		function setObjectCoords() {
		  canvas.forEachObject(function(object) {
			object.setCoords();
		  });
		} …