Properti clipPath baru

Di 2.4.0 kami memperkenalkan properti clipPath untuk semua objek. ClipPath menggantikan clipTo: function() {}, mencapai fleksibilitas yang sama, namun dengan kompatibilitas yang lebih baik.

ClipPath MEMERLUKAN objectCaching, dan akan menggunakannya secara otomatis untuk objek apa pun yang berisi clipPath.

Bagaimana cara menggunakannya

Buat clipPath Anda sendiri menggunakan Objek Fabric normal apa pun, lalu tetapkan ke properti clipPath dari objek yang ingin Anda klip.

Menurut spesifikasi resmi SVG, clipPath tidak memiliki goresan dan diisi dengan warna hitam. Piksel objek yang tumpang tindih dengan piksel hitam clipPath akan terlihat, sedangkan piksel lainnya tidak.

Mari kita mulai dengan beberapa contoh dasar.

Dalam contoh pertama ini, persegi panjang merah dipotong dengan lingkaran, sehingga hanya area di dalam lingkaran yang terlihat.

Harap diperhatikan: clipPath diposisikan mulai dari tengah objek. Nilai originX dan originY objek tidak memainkan peran apa pun, sedangkan clipPath originX dan originY memainkan peran apa pun. Ini adalah logika pemosisian yang sama yang digunakan untuk fabric.Group.

(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);
})()

Kami dapat memotong grup:

(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);
})()

Atau Kita dapat membuat klip menggunakan grup. Dalam kasus grup, ingatlah bahwa setiap objek dalam grup akan secara logis ATAU dengan yang lain, tidak ada aturan klip bukan nol atau ganjil genap

(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);
})()