如何获取fabricjs中对象的所有属性?

时间:2016-04-05 07:28:46

标签: fabricjs

我想知道如何获取fabricjs中对象的所有属性?。     我必须将这些属性应用于另一个对象(我不想克隆)。     请帮帮我。

1 个答案:

答案 0 :(得分:1)

I have found answer for my own question.

<canvas id="canvas" width="300" height="300"></canvas> <br/>
<button id="replace"> Replace </button> 
<span id="message"></span>

var canvas = ctx = activeObject = text1 = text2 = '';
var textProperties = ['angle', 'backgroundColor', 'clipTo', 'fill', 'fillRule', 'flipX', 'flipY', 'fontFamily', 'fontSize', 'fontStyle', 'fontWeight', 'globalCompositeOperation', 'height', 'id', 'left', 'letterSpace', 'lineHeight', 'opacity', 'originX', 'originY', 'path', 'scaleX', 'scaleY', 'shadow', 'stroke', 'strokeDashArray', 'strokeLineCap', 'strokeLineJoin', 'strokeMiterLimit', 'strokeWidth', 'text', 'textAlign', 'textBackgroundColor', 'textDecoration', 'top', 'transformMatrix', 'useNative', 'visible', 'width'];

console.clear();
canvas = new fabric.Canvas('canvas');
ctx = canvas.getContext('2d');

text1 = new fabric.Text('Text1', {
    fill: 'red',
    left: 50,
  top: 50
});

text2 = new fabric.Text('Text2', {
    fill: 'green',
    left: 150,
  top: 50
});

canvas.add(text1, text2).renderAll().setActiveObject(text1);
activeObject = canvas.getActiveObject();

$(document).on('click', '#replace', function(e) {
    e.preventDefault();

  for(var i=0; i<textProperties.length; i++) {
    var property = textProperties[i];
    text2.set(property, activeObject.get(property));
  }
  $("#message").css({ 'display':'block' }).html('Success..!');
  canvas.renderAll().setActiveObject(text2);
});

https://jsfiddle.net/mullainathan/coLcz0zx/

相关问题