กรอบขอบวงกลม Fabric.js เหนือรูปภาพ

คุณจะต้องใช้คุณสมบัติ ClipTo กับรูปภาพของคุณ ClipTo จะกำหนดขนาดวงกลมที่คุณต้องการตัดรอบภาพ

นี่คือตัวอย่างจากไซต์ Fabric.js: http://fabricjs.com/clipping/

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

ตัวอย่างดังกล่าวเป็นการครอบตัดโดยตรง และไม่รวมถึงความสามารถในการย้ายรูปภาพภายในวงกลม เนื่องจากวงกลมและบริเวณที่ตัดเป็นวัตถุเดียวกัน

ฉันได้ทำงานบางอย่างเกี่ยวกับการสร้างส่วนที่ตัดด้วยความสามารถในการย้ายรูปภาพภายในนั้นโดยใช้ FabricJS นี่คือตัวอย่างวิธีที่ฉันนำไปใช้กับสี่เหลี่ยมผืนผ้า คุณจะต้องสำรวจมันให้ลึกยิ่งขึ้น เนื่องจากฉันยังไม่ได้ล้างตัวอย่างนั้นออกไปทั้งหมด http://jsfiddle.net/PromInc/ZxYCP/