Kotak pembatas melingkar Fabric.js di atas gambar

Saya perlu menerapkan fungsi menggambar gambar dalam lingkaran di atas kanvas. Saya menggunakan Fabric.js, namun saya tidak dapat menemukan solusi apa pun. Sebenarnya bila gambar digambar dalam lingkaran, tidak boleh keluar dari batas gambar dan juga pilihan untuk memposisikan gambar dalam lingkaran.


person user3869081    schedule 11.10.2014    source sumber


Jawaban (1)


Anda akan menerapkan properti ClipTo ke gambar Anda. ClipTo kemudian akan menentukan ukuran lingkaran yang akan Anda potong di sekitar gambar.

Berikut ini contohnya dari situs Fabric.js: http://fabricjs.com/clipping/

clipTo: function (ctx) {
  ctx.arc(0, 0, radius, 0, Math.PI * 2, true);
}

Namun contoh tersebut adalah kliping lurus ke atas, dan tidak mencakup kemampuan untuk memindahkan gambar di dalam lingkaran, karena lingkaran dan wilayah kliping pada dasarnya adalah satu objek.

Saya telah melakukan beberapa pekerjaan untuk membuat wilayah kliping dengan kemampuan untuk memindahkan gambar di dalamnya menggunakan FabricJS. Berikut adalah contoh bagaimana saya menerapkan ini untuk persegi panjang. Anda harus menjelajahinya lebih dalam karena saya belum sepenuhnya menghilangkan contoh itu. http://jsfiddle.net/PromInc/ZxYCP/

person PromInc    schedule 12.10.2014