FabricJS图像对象clipTo形状对象问题 [英] FabricJS image object clipTo shape object issue

问题描述

为什么这个clipTo方法不适用于最新的fabricjs版本，您可以调整对象容器及其中的图像的大小。您还可以移动容器对象和图像对象。

Why this clipTo method doesn't work on the latest fabricjs version, which you could resize the object container and the image inside it. Also you able to move the container object and image object.

   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/

或者他们的另一个方法形状对象是图像对象。

Or is their another approach shape object inside is the image object.

推荐答案

最新版本的FabricJS存在一些缓存问题。要解决这个问题，您需要为矩形对象设置 objectCaching 属性为 false 。

There is some caching issue with the latest version of FabricJS. To get around that, you need to set objectCaching property to false for the rectangle object.

$(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>

这篇关于FabricJS图像对象clipTo形状对象问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！