小编kan*_*gax的帖子

我有一个使用 Fabric.js 的画布，用户可以在其中移动图像来进行设计。如何从每个单独的对象获取所有数据，以便可以在图像编辑器中重新创建它？

画布看起来像这样：

超文本标记语言

<div id="CanvasContainer">
    <canvas id="Canvas" width="270" height="519"></canvas>
</div>

脚本语言

//Defining Canvas and object array
var canvas = new fabric.Canvas('Canvas');
var canvasObject = new Array();

//When clicked
$(document).ready(function () {
    $("#Backgrounds img").click(function () {
        var getId = $(this).attr("id");

        //adding all clicked images
        var imgElement = document.getElementById(getId);
        var imgInstance = new fabric.Image(imgElement, {
            left: 135,
            top: 259,
            width: 270,
            height: 519
        });
        //Corner color for clicked images
        imgInstance.set({
            borderColor: 'white',
            cornerColor: 'black',
            transparentCorners: false,
            cornerSize: 12
        });
        canvas.add(imgInstance); …

我正在使用Fabric.js来创建绘图画布.我是否知道有没有获得组对象中属性的属性值？

例如:我创建了一个矩形和一个文本对象,并将它们组合在一起

new fabric.group([rect1,text1],{
        top:100,
        left:100
    });

我尝试过如下:

var objsInCanvas = canvas.getObjects();
for (obj in objsInCanvas) {
    return objsInCanvas[obj].get('text')
}

但它并没有为我获得文本的价值.有人可以就此提出建议吗？

我的画布中有2个对象(图像).

fc.item(0)是画布中间较小的图像.fc.item(1)是一个大图像,"框架".用户无法移动它.当用户试图移动时fc.item(1),我想移动fc.item(0),就像用户的移动一样fc.item(1).

任何想法,我该怎么做？我试图使用fc.item(0).fire("object:moving"),但这并不好用.

我正在尝试更改 fabric.js 中文本的字体属性。

这是我的小提琴：http : //jsfiddle.net/mvprzy/szzGa/

我相信结构脚本的这一部分应该可以工作，但不是：

var fontControl = $('font-control');
fontControl.onchange = function () {
    fabric.Text.set('fontFamily', font-control.value);
    canvas.renderAll();
};

我究竟做错了什么？

这段代码:

var x = 8,
    y = 12;

let ( x = 5, y = 10) {
   return x + y;
} 

..gives"SyntaxError:非法让扩展模式外的声明"

但是"使用严格"它可以正常工作.

所以有趣的是为什么'让'首先与"使用严格"模式集成？(根据http://kangax.github.io/compat-table/es6/#nodeharmony)

你知道一个用于DOM事件模拟的JS库吗？我知道这个操作可以完成,但我找不到任何库来做.

更新:我试着更好地解释我的问题.Javascript可以模拟用户点击等事件,我正在寻找一个帮助我完成此操作的库.

我在Fabric.js上使用叠加图像,它添加如下:

canvas.setOverlayImage('image.png', canvas.renderAll.bind(canvas));

我的问题是我找不到方法从画布中删除它.要删除我可以remove(object)在类中使用的对象fabric.StaticCanvas,但我还没有找到如何将覆盖图像作为对象提供给此方法的方法.我试图将叠加图像设置为null:

canvas.setOverlayImage(null, canvas.renderAll.bind(canvas));

但它没有帮助.

我从JSON对象加载画布并调用，toDataURL但是我需要一个回调，该回调将在加载画布后执行，因为如果画布上有图像，则toDataURL函数会返回空白页，因为在加载图像之前会调用该页面。

 canvas.loadFromJSON(json);

 // I need an event handler here which will be executed after canvas is loaded

 var dataURL = canvas.toDataURL();

我正在使用最新版本:

http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.3.0/fabric.min.js

下面的测试代码模拟您将在1秒后保存的画布.然后从JSON加载它.这适用于旧版本,然后在1.3.0上它停止工作.你将不得不继续像一样超时:

setTimeout( function(){canvas.renderAll()},500);

使它有时工作但不是所有时间.

var img= "https://www.google.com/images/srpr/logo3w.png";          
fabric.Image.fromURL(img, function(img) {
        img.set({
        left: 200,
        top: 200   
    });   
    canvas.add(img); 
    canvas.renderAll();
}); 
 setTimeout( function(){
    var json=JSON.stringify(canvas);
    canvas.clear();         
    canvas.loadFromJSON(json);
    canvas.renderAll(); 
    //setTimeout( function(){canvas.renderAll()},500) // adding a timeout seems to be the only fix.
 },1000)

如何在不添加像以前那样的超时的情况下进行渲染？

嗨，我在我的示例中使用了背景图像。如果我重新加载页面，它会出现一次，但如果我再次运行程序则不会出现。

我尝试使用 setBackgroundImage 设置图像，然后渲染它。它在刷新页面后首先出现，但之后不起作用。

小提琴在这里 - http://jsfiddle.net/wv9MU/6/

// create a wrapper around native canvas element (with id="c")
var canvas = new fabric.Canvas('canvas');

canvas.setBackgroundImage('http://fabricjs.com/assets/jail_cell_bars.png',function() { 
  canvas.renderAll(); 
});


 canvas.setHeight(400);
 canvas.setWidth(1300);
canvas.renderAll();
// create a rectangle object


document.getElementById('1').addEventListener('click', function (e) {
// create a rectangle1 object
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'aqua',

  width: 200,
  height: 200
});

// "add" rectangle1 onto canvas
canvas.add(rect);
rect.lockRotation=true;

 canvas.renderAll();   
 });

canvas.setBackgroundImage('C:\Users\131321\Desktop\abc.jpg', canvas.renderAll.bind(canvas));


document.getElementById('2').addEventListener('click', function (e) {
// create a rectangle2 object
var …