FabricJSイメージオブジェクトclipToシェイプオブジェクトの問題

Question

なぜこのclipToメソッドは、オブジェクトコンテナとその内部のイメージのサイズを変更できる最新のfabricjsバージョンでは機能しません。また、コンテナオブジェクトとイメージオブジェクトを移動することができます。

var imgInstance = new fabric.Image(img, { 
       width: instanceWidth, 
       height: instanceHeight, 
       top: (canvas.getHeight()/2 - instanceHeight/2), 
       left: (canvas.getWidth()/2 - instanceWidth/2), 
       originX: 'left', 
       originY: 'top' 
      }); 
      canvas.add(imgInstance); 
      imgInstance.clipTo = function(ctx) { 
       /* image clipping method doesn't work on latest fabricjs version*/ 
       ctx.save(); 
       ctx.setTransform(1, 0, 0, 1, 0, 0); 

       clippingRect.render(ctx); 

       ctx.restore(); 
      }; 

http://jsfiddle.net/efmbrm4v/2/

または内部それらの別のアプローチ形状オブジェクトがイメージオブジェクトです。

Answer 1

FabricJSの最新バージョンにはいくつかのキャッシングの問題があります。これを回避するには、矩形オブジェクトに対してobjectCachingプロパティをfalseに設定する必要があります。

$(document).ready(function() { 
 
    var imageLoader = document.getElementById('imageLoader'); 
 
    imageLoader.addEventListener('change', handleImage, false); 
 
}); 
 

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

 
var clippingRect = new fabric.Rect({ 
 
    left: 100, 
 
    top: 100, 
 
    width: 100, 
 
    height: 100, 
 
    fill: 'transparent', 
 
    opacity: 1, 
 
    objectCaching: false //<-- set this 
 
}); 
 
canvas.add(clippingRect); 
 

 
function handleImage(e) { 
 
    var reader = new FileReader(); 
 
    reader.onload = function(event) { 
 
     var img = new Image(); 
 
     img.onload = function() { 
 

 
     var instanceWidth, instanceHeight; 
 

 
     instanceWidth = img.width; 
 
     instanceHeight = img.height; 
 

 
     var imgInstance = new fabric.Image(img, { 
 
      width: instanceWidth, 
 
      height: instanceHeight, 
 
      top: (canvas.getHeight()/2 - instanceHeight/2), 
 
      left: (canvas.getWidth()/2 - instanceWidth/2), 
 
      originX: 'left', 
 
      originY: 'top' 
 
     }); 
 
     canvas.add(imgInstance); 
 
     imgInstance.clipTo = function(ctx) { 
 
      ctx.save(); 
 
      ctx.setTransform(1, 0, 0, 1, 0, 0); 
 

 
      clippingRect.render(ctx); 
 

 
      ctx.restore(); 
 
     }; 
 
     canvas.renderAll(); 
 
     }; 
 
     img.src = event.target.result; 
 
    }; 
 
    reader.readAsDataURL(e.target.files[0]); 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.13/fabric.min.js"></script> 
 
<canvas id="myCanvas" width="400" height="300" style="border: 1px solid black"></canvas> 
 
<br /> 
 
<label>Choose a File:</label> 
 
<br/> 
 
<br /> 
 
<input type="file" id="imageLoader" name="imageLoader" /> 
 
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>