Question

Hallo所有iam正在进行一个项目，我需要移动并调整图片和裁剪补丁的大小...我在AndreaBogazzi的帮助下尝试 exaample。

https://stackoverflow.com/questions/44963677/how-to-deal-with-fabric-js-image-mask

现在我有了这个问题，我如何让剪辑补丁移动。

从html开始

       <div>    
        <input type="file" id="fileper" /><br> 
        <button type="button" onclick="zoomIn()">Z +</button>
        <button type="button" onclick="zoomOut()">Z -</button>
        <button type="button" onclick="picLeft()">&#8592;</button>
        <button type="button" onclick="picUp()">&#8593;</button>
        <button type="button" onclick="picDown()">&#8595;</button>
        <button type="button" onclick="picRight()">&#8594;</button> Picture :<br> 
        <button type="button" onclick="cutzoomIn()">Z +</button>
        <button type="button" onclick="cutzoomOut()">Z -</button>
        <button type="button" onclick="cutpicLeft()">&#8592;</button>
        <button type="button" onclick="cutpicUp()">&#8593;</button>
        <button type="button" onclick="cutpicDown()">&#8595;</button>
        <button type="button" onclick="cutpicRight()">&#8594;</button>
        CutPatch:
    </div> 
      <canvas id="c" width="791" height="378" style="border:1px solid #000000"></canvas>

然后是Javascript

var objectID = 0;   
fabric.Image.prototype._render = function(ctx) {
  // custom clip code
  if (this.clipPath) {
    ctx.save();
    if (this.clipPath.fixed) {
      var retina = this.canvas.getRetinaScaling();
      ctx.setTransform(retina, 0, 0, retina, 0, 0);
      this.clipPath.transform(ctx);
    }
    this.clipPath._render(ctx);
    ctx.restore();
    ctx.clip();
  }

  var x = -this.width / 2, y = -this.height / 2, elementToDraw;

  elementToDraw = this._element;
  elementToDraw && ctx.drawImage(elementToDraw,
                                 0, 0, this.width, this.height,
                                 x, y, this.width, this.height);
  this._stroke(ctx);
  this._renderStroke(ctx);
};  

var opts = {
backgroundColor: 'rgb(255,255,255)',
selectionColor: 'rgba(0,0,0,0.3)',
selectionBorderColor: 'blue',
selectionLineWidth: 2
}
var canvas = new fabric.Canvas('c', opts);    



// Zoom In Person Image
function zoomIn() {
  //  alert('zoom in');
  var bObj = canvas.getActiveObject();
  var bobjectW = bObj.getWidth();
  bobjectW = bobjectW + 10;
  bObj.set().scaleToWidth(bobjectW);
  canvas.renderAll();    
}
function zoomOut() {
  // alert('zoom out');
  var bObj = canvas.getActiveObject();
  var bobjectW = bObj.getWidth();
  bobjectW = bobjectW - 10;
  bObj.set().scaleToWidth(bobjectW);
  canvas.renderAll();    
}
function picLeft() {
  var bObj = canvas.getActiveObject();
  var bobjectL = bObj.get('left');
  bobjectL = bobjectL - 5;
  bObj.set("left",bobjectL);
  canvas.renderAll();    
}
function picRight() {
  var bObj = canvas.getActiveObject();
  var bobjectL = bObj.get('left');
  bobjectL = bobjectL + 5;
  bObj.set("left",bobjectL);
  canvas.renderAll();    
}
function picUp() {
  var bObj = canvas.getActiveObject();
  var bobjectL = bObj.get('top');
  bobjectL = bobjectL - 5;
  bObj.set("top",bobjectL);
  canvas.renderAll();     
}
function picDown() {
  var bObj = canvas.getActiveObject();
  var bobjectL = bObj.get('top');
  bobjectL = bobjectL + 5;
  bObj.set("top",bobjectL);
  canvas.renderAll();    
}
// Personbillede    
document.getElementById('fileper').addEventListener("change", function(e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function(f) {
var data = f.target.result;
var center = canvas.getCenter();
fabric.Image.fromURL(data, function(oImg) {
oImg.left = 100;
oImg.top = 100;
oImg.clipPath = new fabric.Path('M162.992,231.771c0,7.828-6.346,14.174-14.173,14.174H21.26c-7.828,0-14.173-6.346-14.173-14.174V19.173C7.087,11.346,13.433,5,21.26,5h127.559c7.827,0,14.173,6.346,14.173,14.173V231.771z',{top: 100, left: 100, fixed: true, fill: '', stroke: ''});
canvas.add(oImg);
canvas.renderAll();
canvas.setActiveObject(canvas.item(objectID));
canvas.getActiveObject().set().scaleToWidth(200);
canvas.getActiveObject().setCoords();
canvas.renderAll();      
window.objectID ++;

//});  

    //var a = canvas.setActiveObject(oImg);
     var dataURL = canvas.toDataURL({
        format: 'png',
        quality: 1
     });
  });       
};
reader.readAsDataURL(file);

});

Hopefuly有人能够解决这个问题，认为这是出于我的标准.....谢谢/ Brian

Fabric JS剪裁移动调整剪裁补丁

0 个答案: