Fabric.js介紹第八部分

新的clipPath屬性

在2.4.0中，我們?yōu)樗袑ο笠肓薱lipPath屬性捆交。 ClipPath將替換clipTo: funcion() {}茧妒，試圖獲得相同的靈活性但更好的兼容性姿骏。

如何使用

創(chuàng)建自己的clipPath作為普通的Fabric對象身笤，并將其指定給要剪輯的對象的clipPath屬性豹悬。
根據(jù)SVG規(guī)范中的定義，clipPath沒有描邊液荸，而是充滿黑色瞻佛，與黑色像素重疊的對象的像素將是可見的，而與黑色像素重疊的對象的像素將是可見的娇钱。
讓我們從一些基本的例子開始伤柄，讓我們看看它是什么樣的。
在第一個示例中文搂，一個紅色的rectable被一個圓圈夾住适刀，只有圓圈內(nèi)的部分是可見的。雖然不是很有用煤蹭，但是基本的功能是這樣的笔喉。
請注意：clipPath位于從物體中心開始的位置，物體的originX和originY不起任何作用硝皂，而clipPath的originX和originY則起作用常挚，定位邏輯與fabric.Group相同。

查看demo

(function() {
  var canvas = new fabric.Canvas('ex1');
  var clipPath = new fabric.Circle({
    radius: 40,
    top: -40,
    left: -40
  });
  var rect = new fabric.Rect({
    width: 200,
    height: 100,
    fill: 'red'
  });
  rect.clipPath = clipPath;
  canvas.add(rect);
})()

我們可以剪下一個組合：
查看demo

(function() {
  var canvas = new fabric.Canvas('ex2');
  var clipPath = new fabric.Circle({
    radius: 100,
    top: -100,
    left: -100
  });
  var group = new fabric.Group([
    new fabric.Rect({ width: 100, height: 100, fill: 'red' }),
    new fabric.Rect({ width: 100, height: 100, fill: 'yellow', left: 100 }),
    new fabric.Rect({ width: 100, height: 100, fill: 'blue', top: 100 }),
    new fabric.Rect({ width: 100, height: 100, fill: 'green', left: 100, top: 100 })
  ]);
  group.clipPath = clipPath;
  canvas.add(group);
})()

或者我們可以用組合來剪輯吧彪。在組合的情況下待侵，記住組合中的每個對象在邏輯上都是或，沒有非零或偶數(shù)的剪裁規(guī)則：

查看demo

(function() {
  var canvas = new fabric.Canvas('ex3');
  var clipPath = new fabric.Group([
    new fabric.Circle({ radius: 70, top: -70, left: -70 }),
    new fabric.Circle({ radius: 40, left: -95, top: -95 }),
    new fabric.Circle({ radius: 40, left: 15, top: 15 }),
  ], { left: -95, top: -95 });
  var group = new fabric.Group([
    new fabric.Rect({ width: 100, height: 100, fill: 'red' }),
    new fabric.Rect({ width: 100, height: 100, fill: 'yellow', left: 100 }),
    new fabric.Rect({ width: 100, height: 100, fill: 'blue', top: 100 }),
    new fabric.Rect({ width: 100, height: 100, fill: 'green', left: 100, top: 100 })
  ]);
  group.clipPath = clipPath;
  canvas.add(group);
})()

更多高級用法

嵌套clipPaths

clipTo的一個問題和canvas.clip()的用法是你不能有多個clipPath姨裸。
通過這種實現(xiàn)秧倾，clippaths可以有自己的clippaths。雖然手動編程不太直觀傀缩，但它允許將clipPaths交叉到一起那先。

查看demo

(function() {
  var canvas = new fabric.Canvas('ex4');
  var clipPath = new fabric.Circle({ radius: 70, top: -50, left: -50 });
  var innerClipPath = new fabric.Circle({ radius: 70, top: -90, left: -90 });
  clipPath.clipPath = innerClipPath;
  var group = new fabric.Group([
    new fabric.Rect({ width: 100, height: 100, fill: 'red' }),
    new fabric.Rect({ width: 100, height: 100, fill: 'yellow', left: 100 }),
    new fabric.Rect({ width: 100, height: 100, fill: 'blue', top: 100 }),
    new fabric.Rect({ width: 100, height: 100, fill: 'green', left: 100, top: 100 })
  ]);
  group.clipPath = clipPath;
  canvas.add(group);
})()

組合內(nèi)對象中的ClipPath應與組本身的clipPath隔離：

查看demo

(function() {
  var canvas = new fabric.Canvas('ex5');
  var clipPath = new fabric.Circle({ radius: 100, top: -100, left: -100 });
  var small = new fabric.Circle({ radius: 50, top: -50, left: -50 });
  var group = new fabric.Group([
    new fabric.Rect({ width: 100, height: 100, fill: 'red', clipPath: small }),
    new fabric.Rect({ width: 100, height: 100, fill: 'yellow', left: 100 }),
    new fabric.Rect({ width: 100, height: 100, fill: 'blue', top: 100 }),
    new fabric.Rect({ width: 100, height: 100, fill: 'green', left: 100, top: 100 })
  ]);
  group.clipPath = clipPath;
  canvas.add(group);
})()

文字剪裁

用文本進行剪裁也是不可能的，開發(fā)人員通常不得不依靠模式來實現(xiàn)這一點：

查看demo

(function() {
  var canvas = new fabric.Canvas('ex6');
  var clipPath = new fabric.Text(
    'Hi I\'m the \nnew ClipPath!\nI hope we\'ll\nbe friends',
    { top: -100, left: -100 });
  var group = new fabric.Group([
    new fabric.Rect({ width: 100, height: 100, fill: 'red' }),
    new fabric.Rect({ width: 100, height: 100, fill: 'yellow', left: 100 }),
    new fabric.Rect({ width: 100, height: 100, fill: 'blue', top: 100 }),
    new fabric.Rect({ width: 100, height: 100, fill: 'green', left: 100, top: 100 })
  ]);
  group.clipPath = clipPath;
  canvas.add(group);
})()

剪裁canvas

我們可以對靜態(tài)畫布應用clipPath赡艰，就像對對象一樣售淡。在這種情況下，clipPath受到縮放和平移的影響慷垮，與物體相反揖闸。clipPath被放置在左上角。

查看demo

(function() {
  var canvas = new fabric.Canvas('ex7');
  var clipPath = new fabric.Circle({ radius: 100, top: 0, left: 50 });
  var group = new fabric.Group([
    new fabric.Rect({ width: 100, height: 100, fill: 'red' }),
    new fabric.Rect({ width: 100, height: 100, fill: 'yellow', left: 100 }),
    new fabric.Rect({ width: 100, height: 100, fill: 'blue', top: 100 }),
    new fabric.Rect({ width: 100, height: 100, fill: 'green', left: 100, top: 100 })
  ]);
  canvas.clipPath = clipPath;
  canvas.add(group);
})()

作為舊的clipTo函數(shù)料身，clipPath也是剪切控件汤纸，除非你使用canvas.controlsAboveOverlay設(shè)置為true

查看demo

(function() {
  var canvas = new fabric.Canvas('ex8');
  canvas.controlsAboveOverlay = true;
  var clipPath = new fabric.Circle({ radius: 100, top: 0, left: 50 });
  var group = new fabric.Group([
    new fabric.Rect({ width: 100, height: 100, fill: 'red' }),
    new fabric.Rect({ width: 100, height: 100, fill: 'yellow', left: 100 }),
    new fabric.Rect({ width: 100, height: 100, fill: 'blue', top: 100 }),
    new fabric.Rect({ width: 100, height: 100, fill: 'green', left: 100, top: 100 })
  ]);
  canvas.clipPath = clipPath;
  canvas.add(group);
})()

動畫clipPaths

剪貼簿可以像任何其他物體一樣進行動畫。Canvas clipPath動畫非常有效芹血，當動畫對象的動畫時贮泞，每次都會使對象緩存失效楞慈。

查看demo

(function() {
  var canvas = new fabric.Canvas('ex9');
  canvas.controlsAboveOverlay = true;
  var clipPath = new fabric.Rect({ width: 100, height: 100, top: 0, left: 0 });
  function animateLeft() {
    clipPath.animate({
      left: 200,
    }, {
      duration: 900,
      onChange: canvas.requestRenderAll.bind(canvas),
      onComplete: animateRight,
    });
  }
  function animateRight() {
    clipPath.animate({
      left: 0,
    }, {
      duration: 1200,
      onChange: canvas.requestRenderAll.bind(canvas),
      onComplete: animateLeft,
    });
  }
  function animateDown() {
    clipPath.animate({
      top: 100,
    }, {
      duration: 500,
      onChange: canvas.requestRenderAll.bind(canvas),
      onComplete: animateUp,
    });
  }
  function animateUp() {
    clipPath.animate({
      top: 0,
    }, {
      duration: 400,
      onChange: canvas.requestRenderAll.bind(canvas),
      onComplete: animateDown,
    });
  }
  var group = new fabric.Group([
    new fabric.Rect({ width: 100, height: 100, fill: 'red' }),
    new fabric.Rect({ width: 100, height: 100, fill: 'yellow', left: 100 }),
    new fabric.Rect({ width: 100, height: 100, fill: 'blue', top: 100 }),
    new fabric.Rect({ width: 100, height: 100, fill: 'green', left: 100, top: 100 })
  ], {
    scaleX: 1.5
  });
  animateLeft();
  animateDown();
  canvas.clipPath = clipPath;
  canvas.add(group);
})()

Fabric.js介紹 第八部分

新的clipPath屬性

如何使用

更多高級用法

嵌套clipPaths

文字剪裁

剪裁canvas

動畫clipPaths

Fabric.js介紹第八部分