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

【问题标题】：Restrict area for draw image object in canvas HTML5限制画布 HTML5 中绘制图像对象的区域
【发布时间】：2016-04-29 05:51:06
【问题描述】：

我想限制可以在画布上绘制图像的区域。我正在使用 Fabric.js。

我尝试了以下链接，但它对我不起作用。 Set object drag limit in 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" />

【问题讨论】：

你能尝试更好地解释用户应该能够对图像做什么吗？
@AndreaBogazzi。图像应该用旋转和缩放属性绘制成红线..
越界会发生什么？它应该消失外面的部分还是应该阻止移动？
@AndreaBogazzi。它应该消失了。
@varunsharma。你的问题是重复的。链接的原始问题包含一个答案以及 FabricJS 的创建者的评论：“观看 'object:moving'、'object:scaling' 等事件并相应地约束对象的左侧/顶部属性。- kangax”

标签： html canvas html5-canvas fabricjs

【解决方案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" />

【讨论】：