编辑2016年10月24日

Question

编辑2016年10月24日

我通过使用'模式'来了解这个功能，这似乎是一个好主意。

我试图用这支笔证明我的想法，它仍然是小马车，但至少我们可以设置图像（图案）位置并在双击时保留原始图像。

我对javascript不是很擅长，所以如果您对此感兴趣，请帮助使其更有用，欢迎任何讨论/想法或代码更正。 http://codepen.io/wushan/pen/LRrQEL?editors=1010

// Create Canvas
var canvas = this.__canvas = new fabric.CanvasEx('c', {
  preserveObjectStacking: true
});
fabric.Object.prototype.transparentCorners = false;
// Global Settings
var url = "http://fabricjs.com/assets/pug.jpg";

//Make the Pattern by url
function createMaskedImage(url) {
  //Load Image
  fabric.Image.fromURL(url, function(img) {
    img.scaleToWidth(300);
    //Make a Pattern
    var patternSourceCanvas = new fabric.StaticCanvas();
    patternSourceCanvas.add(img);

    var pattern = new fabric.Pattern({
      source: function() {
        patternSourceCanvas.setDimensions({
          width: img.getWidth(),
          height: img.getHeight()
        });
        return patternSourceCanvas.getElement();
      },
      repeat: 'no-repeat'
    });
    console.log(pattern.offsetX)
    console.log(pattern.offsetY)
    console.log(img.getWidth()) // 縮小後 (*scale)
    console.log(img.width) // 原尺寸

    //Mask (can be any shape ex: Polygon, Circles....)
    var rect = new fabric.Rect({
      width: 200,
      height: 200,
      left: 150,
      top: 100,
      fill: pattern
    })

    //Bind Double Click Event from fabric.ext
    //https://github.com/mazong1123/fabric.ext
    rect.on('object:dblclick', function (options) {
      //Pass pattern out
      enterEditMode(rect, img);
    });
    canvas.add(rect);
    canvas.setActiveObject(rect);
  }); 
}

function enterEditMode(mask, image) {
  image.left = mask.left;
  image.top = mask.top;
  // New Image
  // Fake Crop Area (fixed)
  var rect = new fabric.Rect({
      width: mask.width,
      height: mask.height,
      left: mask.left,
      top: mask.top,
      fill: '#000000',
      opacity: 0.8,
      selectable: false
    })
  canvas.remove(mask);
  canvas.add(image);
  image.on('object:dblclick', function (options) {
      //Flatten
      flatten(rect, image);
  });
  canvas.add(rect);
  // console.log(JSON.stringify(canvas));
}

function flatten(mask, image) {
  //Make a Pattern
  var patternSourceCanvas = new fabric.StaticCanvas();
  patternSourceCanvas.add(image);

  var pattern = new fabric.Pattern({
    source: function() {
      patternSourceCanvas.setDimensions({
        width: image.getWidth(),
        height: image.getHeight()
      });
      return patternSourceCanvas.getElement();
    },
    repeat: 'no-repeat'
  });

  //Offsets
  pattern.offsetX = image.left - mask.left - image.left;
  pattern.offsetY = image.top - mask.top - image.top;

  var rect = new fabric.Rect({
    width: mask.width,
    height: mask.height,
    left: mask.left,
    top: mask.top,
    fill: pattern
  })

  //Bind Double Click Event from fabric.ext
  //https://github.com/mazong1123/fabric.ext
  rect.on('object:dblclick', function (options) {
    //Pass pattern out
    enterEditMode(rect, image);
  });
  canvas.remove(mask);
  canvas.remove(image);
  canvas.add(rect);
  canvas.setActiveObject(rect);
  canvas.renderAll();
}

//Button Events
//Create
document.getElementById('createMaskedImage').addEventListener('click', function () {
  createMaskedImage(url);
});