Fabric.js : ToJSON이 작동하지 않으므로 clipTo 객체를 직렬화하는 방법은 무엇입니까?

Question

ClipTo 직렬화를 보여주는 jsfiddle 예제에 대한 지침이 만족 스럽습니까? 클리핑 된 객체를 직렬화하려고 할 때 현재 ToJSON 기능이 작동하지 않습니다. 코드 하단의 ToJSON 구현을 참조하십시오.

JSFiddle 링크는 : http://jsfiddle.net/PromInc/ZxYCP/

var img01URL = 'https://www.google.com/images/srpr/logo4w.png'; 
var img02URL = 'http://fabricjs.com/lib/pug.jpg'; 

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

// Note the use of the `originX` and `originY` properties, which we set 
// to 'left' and 'top', respectively. This makes the math in the `clipTo` 
// functions a little bit more straight-forward. 
var clipRect1 = new fabric.Rect({ 
    originX: 'left', 
    originY: 'top', 
    left: 180, 
    top: 10, 
    width: 200, 
    height: 200, 
    fill: '#DDD', /* use transparent for no fill */ 
    strokeWidth: 0, 
    selectable: false 
}); 
// We give these `Rect` objects a name property so the `clipTo` functions can 
// find the one by which they want to be clipped. 
clipRect1.set({ 
    clipFor: 'pug' 
}); 
canvas.add(clipRect1); 

var clipRect2 = new fabric.Rect({ 
    originX: 'left', 
    originY: 'top', 
    left: 10, 
    top: 10, 
    width: 150, 
    height: 150, 
    fill: '#DDD', /* use transparent for no fill */ 
    strokeWidth: 0, 
    selectable: false 
}); 
// We give these `Rect` objects a name property so the `clipTo` functions can 
// find the one by which they want to be clipped. 
clipRect2.set({ 
    clipFor: 'logo' 
}); 
canvas.add(clipRect2); 

function findByClipName(name) { 
    return _(canvas.getObjects()).where({ 
      clipFor: name 
     }).first() 
} 

// Since the `angle` property of the Image object is stored 
// in degrees, we'll use this to convert it to radians. 
function degToRad(degrees) { 
    return degrees * (Math.PI/180); 
} 

var clipByName = function (ctx) { 
    this.setCoords(); 
    var clipRect = findByClipName(this.clipName); 
    var scaleXTo1 = (1/this.scaleX); 
    var scaleYTo1 = (1/this.scaleY); 
    ctx.save(); 

    var ctxLeft = -(this.width/2) + clipRect.strokeWidth; 
     var ctxTop = -(this.height/2) + clipRect.strokeWidth; 
     var ctxWidth = clipRect.width - clipRect.strokeWidth; 
     var ctxHeight = clipRect.height - clipRect.strokeWidth; 

    ctx.translate(ctxLeft, ctxTop); 

    ctx.rotate(degToRad(this.angle * -1)); 
    ctx.scale(scaleXTo1, scaleYTo1); 
    ctx.beginPath(); 
    ctx.rect(
     clipRect.left - this.oCoords.tl.x, 
     clipRect.top - this.oCoords.tl.y, 
     clipRect.width, 
     clipRect.height 
    ); 
    ctx.closePath(); 
    ctx.restore(); 
} 

var pugImg = new Image(); 
pugImg.onload = function (img) {  
    var pug = new fabric.Image(pugImg, { 
     angle: 45, 
     width: 500, 
     height: 500, 
     left: 230, 
     top: 50, 
     scaleX: 0.3, 
     scaleY: 0.3, 
     clipName: 'pug', 
     clipTo: function(ctx) { 
      return _.bind(clipByName, pug)(ctx) 
     } 
    }); 
    canvas.add(pug); 
}; 
pugImg.src = img02URL; 

var logoImg = new Image(); 
logoImg.onload = function (img) {  
    var logo = new fabric.Image(logoImg, { 
     angle: 0, 
     width: 550, 
     height: 190, 
     left: 50, 
     top: 50, 
     scaleX: 0.25, 
     scaleY: 0.25, 
     clipName: 'logo', 
     clipTo: function(ctx) { 
      return _.bind(clipByName, logo)(ctx) 
     } 
    }); 
    canvas.add(logo); 
}; 
logoImg.src = img01URL; 

//convert to json 
var serialized=JSON.stringify(canvas); 

canvas.clear(); 
canvas.loadFromDatalessJSON(serialized); 
alert(serialized); 

Answer 1

fabricjs clipTo은 기본적으로 캔버스의 JSON 표현에 포함되어야한다.

따라서 toJSON을 사용하면 clipTo 함수가 포함 된 캔버스의 json 표현에서 clipTo 필드를 찾을 수 있습니다.

여기에 demo입니다.