Customization

สิ่งที่น่าทึ่งอย่างหนึ่งเกี่ยวกับ Fabric คือความสามารถในการปรับแต่งได้ คุณสามารถปรับแต่งพารามิเตอร์ต่างๆ มากมายบนแคนวาสหรือออบเจ็กต์แคนวาส เพื่อทำให้สิ่งต่างๆ ทำงานตามที่คุณต้องการ ลองมาดูบางส่วนของพวกเขา

การล็อควัตถุ

วัตถุทุกชิ้นบนผืนผ้าใบสามารถล็อคได้หลายวิธี "lockMovementX", "lockMovementY", "lockRotation", "lockScalingX", "lockScalingY" เป็นคุณสมบัติที่ล็อคการกระทำของวัตถุที่เกี่ยวข้อง ดังนั้นการตั้งค่า object.lockMovementX ให้เป็นจริงจะป้องกันไม่ให้วัตถุถูกย้ายในแนวนอน คุณยังคงสามารถเคลื่อนย้ายมันในระนาบแนวตั้งได้ ในทำนองเดียวกัน lockRotation ป้องกันการหมุนและ lockScalingX/lockScalingY — มาตราส่วน ทั้งหมดนี้เป็นผลสะสม คุณสามารถรวมเข้าด้วยกันด้วยวิธีใดก็ได้

การเปลี่ยนเส้นขอบมุม

คุณสามารถควบคุมการมองเห็นเส้นขอบและมุมของวัตถุได้ผ่านคุณสมบัติ "hasControls" และ "hasBorders" เพียงตั้งค่าเป็นเท็จและวัตถุจะแสดงผล "เปลือยเปล่า" ทันที

object.hasBorders = false;

object.hasControls = false;

คุณยังสามารถเปลี่ยนรูปลักษณ์ได้โดยปรับแต่งคุณสมบัติการปรับแต่งบางอย่าง "cornerDashArray", "borderDashArray", "borderColor", "transparentCorners" "cornerColor", "cornerStrokeColor", "cornerStyle", "selectionBackgroundColor", "padding" และ "cornerSize " คุณสมบัติ.

object.set({
  borderColor: 'red',
  cornerColor: 'green',
  cornerSize: 6
});

  object.set({
    transparentCorners: false,
    cornerColor: 'blue',
    cornerStrokeColor: 'red',
    borderColor: 'red',
    cornerSize: 12,
    padding: 10,
    cornerStyle: 'circle',
    borderDashArray: [3, 3]
  });
  

กำลังปิดการใช้งานการเลือก

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

การปรับแต่งการเลือก

ตอนนี้ จะเป็นอย่างไรหากคุณไม่ต้องการปิดการใช้งานการเลือก แต่ต้องการเปลี่ยนรูปลักษณ์ของมันแทน ไม่มีปัญหา.

มีคุณสมบัติ 4 อย่างบนผืนผ้าใบที่ควบคุมการนำเสนอ ได้แก่ "selectionColor", "selectionBorderColor", "selectionLineWidth" และ "selectionDashArray" สิ่งเหล่านี้ควรอธิบายได้ในตัว ดังนั้นเรามาดูตัวอย่างกัน:

canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));

canvas.selectionColor = 'rgba(0,255,0,0.3)';
canvas.selectionBorderColor = 'red';
canvas.selectionLineWidth = 5;

คุณสมบัติสุดท้าย - "selectionDashArray" - ไม่ตรงไปตรงมา สิ่งที่ช่วยให้เราทำคือทำให้เส้นการเลือกเป็นเส้นประ วิธีการกำหนดรูปแบบเส้นประคือการระบุช่วงเวลาผ่านอาร์เรย์ ดังนั้น เพื่อสร้างรูปแบบที่มีเส้นประยาวหนึ่งเส้นตามด้วยเส้นประสั้นหนึ่งเส้น เราสามารถใช้ค่าประมาณ [10, 5] เป็น "selectionDashArray" เพื่อลากเส้นยาว 10px จากนั้นข้าม 5px แล้วลากเส้น 10px อีกครั้ง เป็นต้น หากเราใช้อาร์เรย์ [2, 4, 6] รูปแบบจะถูกสร้างขึ้นโดยการวาดเส้น 2px จากนั้นข้าม 4px จากนั้นวาดเส้น 6px จากนั้นข้าม 2px จากนั้นวาดเส้น 4px จากนั้นข้าม 6px เป็นต้น คุณได้รับประเด็น ตามตัวอย่าง รูปแบบ [5, 10] มีลักษณะดังนี้:

จังหวะประ

เช่นเดียวกับ "selectionDashArray" บนผืนผ้าใบ อ็อบเจ็กต์ Fabric ทั้งหมดมีคุณสมบัติ " strokeDashArray" ที่รับผิดชอบรูปแบบเส้นประของเส้นขีดใดๆ ที่เกิดขึ้นบนออบเจ็กต์

var rect = new fabric.Rect({
  fill: '#06538e',
  width: 125,
  height: 125,
  stroke: 'red',
  strokeDashArray: [5, 5]
});
canvas.add(rect);

พื้นที่ที่สามารถคลิกได้

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

ลองดูภาพนี้:

ตามค่าเริ่มต้น วัตถุ Fabric ทั้งหมดบนผืนผ้าใบสามารถลากโดยใช้กล่องขอบได้ อย่างไรก็ตาม หากคุณต้องการพฤติกรรมที่แตกต่างออกไป — การคลิก/ลากวัตถุตามเนื้อหาจริงเท่านั้น คุณสามารถใช้คุณสมบัติ "perPixelTargetFind" บนวัตถุได้ เพียงตั้งค่าเป็นจริงเพื่อให้ได้พฤติกรรมที่ต้องการ

จุดหมุน

เนื่องจากเวอร์ชัน 1.0 Fabric ใช้ UI ทางเลือกตามค่าเริ่มต้น วัตถุจึงไม่สามารถปรับขนาดและหมุนพร้อมกันได้อีกต่อไป แต่มีการควบคุมการหมุนแยกต่างหากในแต่ละวัตถุ คุณสมบัติที่สอดคล้องกันสำหรับตัวควบคุมนั้นคือ "hasRotatingPoint" คุณสามารถปรับแต่งออฟเซ็ตโดยสัมพันธ์กับออบเจ็กต์ผ่านคุณสมบัติตัวเลข "rotatingPointOffset"

การแปลงวัตถุ

มีคุณสมบัติที่เกี่ยวข้องกับการเปลี่ยนแปลงอื่น ๆ อีกมากมายที่มีอยู่ใน Fabric ตั้งแต่เวอร์ชัน 1.0 หนึ่งในนั้นคือ "uniScaleTransform" บนอินสแตนซ์แคนวาส โดยค่าเริ่มต้นจะเป็นเท็จ และสามารถใช้เพื่อเปิดใช้งานการปรับขนาดวัตถุที่ไม่สม่ำเสมอ กล่าวอีกนัยหนึ่งคือช่วยให้สามารถเปลี่ยนสัดส่วนของวัตถุได้เมื่อลากตามมุม

จากนั้นมีคุณสมบัติ "centeredScaling" และ "centeredRotation" (ก่อน v1.3.4 จะเป็นคุณสมบัติเดียว - "centerTransform") โดยระบุว่าควรใช้จุดศูนย์กลางของวัตถุเป็นจุดกำเนิดของการเปลี่ยนแปลงหรือไม่ เมื่อทั้งสองค่าถูกตั้งค่าให้เป็นจริง มันจะจำลองพฤติกรรมก่อน 1.0 เมื่อออบเจ็กต์ถูกปรับขนาด/หมุนจากศูนย์กลางเสมอ เนื่องจากต้นกำเนิดของการเปลี่ยนแปลง 1.0 นั้นเป็นแบบไดนามิก ซึ่งช่วยให้สามารถควบคุมได้ละเอียดยิ่งขึ้นเมื่อปรับขนาดออบเจ็กต์

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

แล้วเราจะเปลี่ยนมันด้วยตนเองเมื่อใด? ตัวอย่างเช่น เมื่อทำงานกับวัตถุข้อความ เมื่อคุณเปลี่ยนข้อความแบบไดนามิก และขนาดกล่องข้อความเพิ่มขึ้น "originX" และ "originY" จะกำหนดตำแหน่งที่กล่องจะขยาย ดังนั้นหากคุณต้องการจัดกึ่งกลางวัตถุข้อความ คุณจะต้องตั้งค่า originX เป็น "center" หากต้องการติดไปทางขวา คุณจะต้องตั้งค่า originX เป็น "right" และอื่นๆ ลักษณะการทำงานนี้คล้ายกับ "ตำแหน่ง: สัมบูรณ์" ใน CSS

พื้นหลังแคนวาสและการซ้อนทับ

ดังที่คุณอาจจำได้ตั้งแต่ส่วนที่ 1 คุณสามารถกำหนดสีให้เต็มพื้นหลังแคนวาสได้ เพียงตั้งค่าสีปกติเป็นคุณสมบัติ "สีพื้นหลัง" ของผืนผ้าใบ

canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
canvas.backgroundColor = 'rgba(0,0,255,0.3)';
canvas.renderAll();

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

canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));

สิ่งสำคัญที่ควรทราบคือแม้ว่าคุณสมบัติจะเรียกว่า 'พื้นหลังรูปภาพ' แต่ก็สามารถโฮสต์ออบเจ็กต์แฟบริคประเภทใดก็ได้ คุณสามารถตั้งค่า `fabric.Rect` ให้เป็นตัวแทนของอาร์ตบอร์ด หรือคุณสามารถตั้งค่ากลุ่มของวัตถุก็ได้ เช่นเดียวกับ `ภาพซ้อนทับ' ด้านล่างหรือ 'สีพื้นหลัง' ที่สามารถโฮสต์ตัวเติมใดๆ เช่น การไล่ระดับสีหรือรูปแบบ

สุดท้ายนี้ คุณยังสามารถตั้งค่าภาพซ้อนทับได้ ซึ่งในกรณีนี้ภาพจะปรากฏที่ด้านบนของวัตถุใดๆ ก็ตามที่แสดงผลบนผืนผ้าใบเสมอ เพียงใช้ setOverlayImage ส่ง url และตัวเลือกการโทรกลับให้เสร็จสิ้น

canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));