如何限制透明矩形区域内的对象 - FabricJS？

Question

我正在使用FabricJS来实现设计器功能。我的想法是使用 Fabric 中的 setBackgroundImage 设置背景图像，我还添加了透明矩形的特定区域，其大小和位置从JCrop获取。现在回答我的问题，我想将对象放置限制在透明矩形的特定区域内。假设我想添加应该在该有限区域内的文本/图像/形状，我能够实现背景图像、透明矩形的位置甚至圆形对象，但我无法找到限制对象将其放置在透明矩形内的详细信息并且仅限于该地区。

这是我的下面的代码和工作小提琴，如果您在小提琴图像中看到它，您需要选择裁剪部分，并在带有透明矩形的画布背景下方，这与裁剪选择相同。现在我想限制对象放置在透明矩形中，现在我可以将对象放置在画布中的任何位置。

超文本标记语言

   <img src="https://images.unsplash.com/photo-1595438337199-d50ba5072c7e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=330&q=80" id="target">

   <div class="canvas-container" style="position: relative; user-select: none;">
     <canvas id="c1" width="600" height="600" style="border:1px solid #ccc; position: absolute;  left: 0px; top: 0px; touch-action: none; user-select: none;"></canvas>
   </div>

JS

function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {
  var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);
  return {
    width: srcWidth * ratio,
    height: srcHeight * ratio,
    aspectratio: ratio
  };
}

jQuery(function($) {
    //alert("Testing");
  var img = new Image();
  img.onload = function() {
    var data = calculateAspectRatioFit(this.width, this.height, '400', '600');
    console.log(data);
    jQuery('#target').attr('width', data.width);
    jQuery('#target').attr('height', data.height);
    jQuery('#pdr-drawing-area').html("Aspect Ratio: " + data.aspectratio);
    const stage = Jcrop.attach('target');
    stage.listen('crop.change', function(widget, e) {
      const pos = widget.pos;
      console.log(pos.x, pos.y, pos.w, pos.h);
      //fabric js
      var canvas = new fabric.Canvas('c1');
      var center = canvas.getCenter();
      var img = 'https://images.unsplash.com/photo-1595438337199-d50ba5072c7e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=330&q=80';
      canvas.setBackgroundImage(img, function() {
        canvas.backgroundImage && canvas.backgroundImage.scaleToWidth(data.width);
        canvas.backgroundImage && canvas.backgroundImage.scaleToHeight(data.height);
        //canvas.sendToBack(img);
        canvas.renderAll();
      });
      console.log(pos.x * data.aspectratio);
      var rect = new fabric.Rect({
        left: pos.x,
        top: pos.y,
        fill: 'transparent',
        width: (pos.w),
        height: (pos.h),
        strokeDashArray: [5, 5],
        stroke: "black",
        selectable: false,
        evented: false,
        //visible: false
      });



      canvas.add(new fabric.Circle({
        radius: 30,
        fill: '#f55',
        top: pos.y + 2,
        left: pos.x + 2
      }));

      canvas.add(rect);
      canvas.setHeight(data.height);
      canvas.setWidth(data.width);
      canvas.renderAll();
    });
  },
   img.src = 'https://images.unsplash.com/photo-1595438337199-d50ba5072c7e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=330&q=80';
});

Answer 1

下面是如何在 FabricJS 中限制移动的示例。
我正在使用画布的有状态属性，请参见function objectMoving下文。

var canvas = new fabric.Canvas("canvas");
canvas.stateful = true;

function inside(p, vs) {
    var inside = false;
    for (var i = 0, j = vs.length - 1; i < vs.length; j = i++) {
        var xi = vs[i].x, yi = vs[i].y;
        var xj = vs[j].x, yj = vs[j].y;
        var intersect = yi > p.y !== yj > p.y && p.x < ((xj - xi) * (p.y - yi)) / (yj - yi) + xi;
        if (intersect) inside = !inside;
    }
    return inside;
}

function getCoords(rect) {
    var coords = []
    coords.push(rect.aCoords.tl);
    coords.push(rect.aCoords.tr);
    coords.push(rect.aCoords.br);
    coords.push(rect.aCoords.bl);
    coords.push(rect.aCoords.tl);
    return coords;
}

function objectMoving(e) {
    var cCoords = getCoords(parent);
    var inBounds = inside({ x: e.target.left + 30, y: e.target.top + 30 }, cCoords);

    if (inBounds) {
        e.target.setCoords();
        e.target.saveState();
    } else {
        e.target.left = e.target._stateProperties.left;
        e.target.top = e.target._stateProperties.top;
    }
}

var boundary = new fabric.Rect({
    width: 310, height: 170,
    left: 5, top: 5,
    selectable: false,
    strokeDashArray: [5, 2],
    stroke: "blue",
    fill: "transparent"
});

var parent = new fabric.Rect({
    width: 250, height: 110,
    left: 35, top: 35,
    selectable: false,
    strokeDashArray: [2, 5],
    stroke: "black",
    fill: "transparent"
});

var child = new fabric.Circle({
    radius: 30,
    fill: "rgba(255,0,0,0.8)",
    top: 50, left: 50,
    hasControls: false,
});

canvas.add(boundary);
canvas.add(parent);
canvas.add(child);
canvas.on("object:moving", objectMoving);

<canvas id="canvas" width="400" height="180"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>

在function inside我正在使用光线投射算法中，您可以在这里阅读更多相关信息： https: //github.com/substack/point-in-polygon/blob/master/index.js
我更喜欢这个算法，因为它打开以后允许更复杂的形状作为父边界的门，它可以处理任何形状的多边形。

如果您需要对该代码的任何说明，请告诉我。

现在，您确实需要将其集成到您的项目中，并在“JCrop”选择中的用户中发生变化时动态更改父边界