在HTML5画布中限制绘制图像对象的区域

Question

我希望限制画布中图像可以绘制的区域，我正在使用Fabric.js。

我尝试了下面的链接，但它对我没有用。在 Fabric.js 中设置对象拖动限制。

我希望任何超出红色矩形框（如下图所示）绘制的图像部分都不会被绘制。

var canvas = new fabric.Canvas('canvas');
$("#canvascolor > input").click(function() {
  canvas.setBackgroundImage(this.src, canvas.renderAll.bind(canvas), {
    crossOrigin: 'anonymous'
  });
});
// trigger the first one at startup
$("#canvascolor > input:first-of-type()")[0].click();

document.getElementById('file').addEventListener("change", function(e) {
  var file = e.target.files[0];
  var reader = new FileReader();
  console.log("reader   " + reader);
  reader.onload = function(f) {
    var data = f.target.result;
    fabric.Image.fromURL(data, function(img) {
      var oImg = img.set({
        left: 140,
        top: 100,
        width: 250,
        height: 200,
        angle: 0
      }).scale(0.9);
       oImg.lockMovementX = true;
     
      canvas.add(oImg).renderAll();
      var a = canvas.setActiveObject(oImg);
      var dataURL = canvas.toDataURL({
        format: 'png',
        quality: 0.8
      });
    });
  };
  reader.readAsDataURL(file);
});
document.querySelector('#txt').onclick = function(e) {
  e.preventDefault();
  canvas.deactivateAll().renderAll();
  document.querySelector('#preview').src = canvas.toDataURL();
};

  canvas {
  border: 1px solid black;
}
#canvascolor input {
  height: 50px;
  width: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
   <input type="file" id="file">
<canvas id="canvas" width="520" height="520"></canvas>
<section id="canvascolor">
  <input class="canvasborder" type="image" src="https://dl.dropboxusercontent.com/s/9leyl96qd3tytn8/tshirt-front.jpg">
  <input class="canvasborder" type="image" src="https://dl.dropboxusercontent.com/s/tk0fs5v4muo6898/tshirt-back.jpg">
</section>
<button href='' id='txt' target="_blank">submit</button><br/>
<img id="preview" />

- Varun Sharma

---

你能否尝试更好地解释用户应该如何使用图像？ - AndreaBogazzi

超出边界会发生什么？它应该让超出的部分消失还是应该阻止移动？ - AndreaBogazzi

@varunsharma。你的问题是重复的。原始链接的问题包含了来自FabricJS创建者的答案和评论：“观察'object:moving'，'object:scaling'等事件，并相应地约束对象的左/上属性。- kangax” - markE

@AndreaBogazzi。好的，已重新开放。 :-) - markE

@AndreaBogazzi。我看到了你的回答，但我不想要图片。我想要给拖动和缩放设置一些限制。https://dev59.com/jpLea4cB1Zd3GeqP6L-5。 - Varun Sharma

Answer 1

我为您扩展了脚本以回答您的问题。针对您的用例，看起来您可以使用一些剪裁函数和统一居中缩放。

总之，关于限制绘图区域的主要问题是：

var canvas = new fabric.Canvas('canvas');
$("#canvascolor > input").click(function() {
  canvas.setBackgroundImage(this.src, canvas.renderAll.bind(canvas), {
    crossOrigin: 'anonymous'
  });
});
// trigger the first one at startup
$("#canvascolor > input:first-of-type()")[0].click();
function clipTShirt(ctx) {
   ctx.save();
   ctx.setTransform(1, 0, 0, 1, 0, 0);
   var x = 140, y = 100 ,w = 225, h = 300;
   ctx.moveTo(x, y);
   ctx.lineTo(x + w, y);
   ctx.lineTo(x + w, y + h);
   ctx.lineTo(x, y + h);
   ctx.lineTo(x, y);
   ctx.restore();
}
document.getElementById('file').addEventListener("change", function(e) {
  var file = e.target.files[0];
  var reader = new FileReader();
  console.log("reader   " + reader);
  reader.onload = function(f) {
    var data = f.target.result;
    fabric.Image.fromURL(data, function(img) {
      var oImg = img.set({
        left: 140,
        top: 100,
        width: 250,
        height: 200,
        angle: 0,
        lockUniScaling: true,
        centeredScaling: true,
        clipTo: clipTShirt
      }).scale(0.9);
       oImg.lockMovementX = true;
     
      canvas.add(oImg).renderAll();
      var a = canvas.setActiveObject(oImg);
      var dataURL = canvas.toDataURL({
        format: 'png',
        quality: 0.8
      });
    });
  };
  reader.readAsDataURL(file);
});
document.querySelector('#txt').onclick = function(e) {
  e.preventDefault();
  canvas.deactivateAll().renderAll();
  document.querySelector('#preview').src = canvas.toDataURL();
};

  canvas {
  border: 1px solid black;
}
#canvascolor input {
  height: 50px;
  width: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
   <input type="file" id="file">
<canvas id="canvas" width="520" height="520"></canvas>
<section id="canvascolor">
  <input class="canvasborder" type="image" src="https://dl.dropboxusercontent.com/s/9leyl96qd3tytn8/tshirt-front.jpg">
  <input class="canvasborder" type="image" src="https://dl.dropboxusercontent.com/s/tk0fs5v4muo6898/tshirt-back.jpg">
</section>
<button href='' id='txt' target="_blank">submit</button><br/>
<img id="preview" />

- AndreaBogazzi