我如何 select fabric js 中的裁剪图像

Question

<html>
<head>
    <style type="text/css">
        canvas{
            border:1px solid #ccc;
        }

        .canvas-container{
            float: left;
            left: 20px; 
        }
    </style>
</head>
<body>
<canvas id='canvas' width='500' height='600' ></canvas>
<canvas id='C2' width='500' height='600'></canvas>
<script type="text/javascript" src="fabric.js"></script>
<script>
    (function() {
      var canvas = this.__canvas = new fabric.Canvas('canvas');
      fabric.Object.prototype.transparentCorners = false;

      var radius = 300;

      fabric.Image.fromURL('./images/Chrysanthemum.jpg', function(img) {
        img.scale(0.4).set({
          left: 10,
          top: 100,
          angle: 0,
          clipTo: function (ctx) {
            ctx.rect(-250, -250, 400, 400);
          }
        });
        canvas.add(img).setActiveObject(img);
        console.log(canvas.getActiveObject());
      });
    })();
</script>
</body>


----------


</html>

//上面的代码；

现在活动对象大小与未裁剪的图像相同；但是，如果有什么办法可以使裁剪后的图像成为selected.Means较小的尺寸，则将选择较小的尺寸。谢谢！

Answer 1

Clip 不适合这种效果：如果您想要一些裁剪，如果您的裁剪与属性 preserverveAspectRatio 允许的不同，则最好使用模式技巧。（基本上在中心裁剪，在 x 轴和 y 轴上裁剪左裁剪右裁剪）。

如您所见，我创建了一个具有所需尺寸的矩形，而不是图像，然后我使用加载的 img 创建一个将填充矩形的图案。然后，您可以在 pattern 上使用 offsetX 和 offsetY 来修改图像可见的部分。

偏移量可访问：

rect.fill.offsetX
rect.fill.offsetY

    (function() {
      var canvas = this.__canvas = new fabric.Canvas('canvas');
      fabric.Object.prototype.transparentCorners = false;

      var radius = 300;

      fabric.Image.fromURL('http://fabricjs.com/assets/pug.jpg', function(img) {
        var rect = new fabric.Rect({width: 400, height: 400});
        var pattern = new fabric.Pattern({source: img.getElement(), offsetX: -20, offsetY: -50});
        rect.scale(0.4).set({
          left: 10,
          top: 100,
          angle: 0,
          fill: pattern,
        });
        canvas.add(rect).setActiveObject(rect);
      });
    })();

canvas{
  border:1px solid #ccc;
}

.canvas-container{
  float: left;
  left: 20px; 
}

<canvas id='canvas' width='500' height='600' ></canvas>
<canvas id='C2' width='500' height='600'></canvas>
<script type="text/javascript" src="http://fabricjs.com/lib/fabric.js"></script>

我如何 select fabric js 中的裁剪图像

How can I select the cropped image in fabric js

html

html5-canvas

fabricjs