2016-04-05 22 views

答えて

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/

関連する問題