fabric.js เปลี่ยนรูป control ต่าง ๆ ของ fabric.js / resize and rotate controls with custom images

fabric.js เปลี่ยนรูป control ต่าง ๆ ของ fabric.js / resize and rotate controls with custom images



สำหรับคนที่ใช้ fabric.js ในการทำแอพต่าง ๆ อาจจะมีปัญหาเกี่ยวกับการปรับแต่งหน้าตา transform tool
ตัว default ของ fabric.js วันนี้มาแนะนำวิธีเปลี่ยนรูปสี่เหลี่ยมเดิม ๆ ของ fabric.js ให้เป็นรูปตาที่เราต้องการ

วิธีเปลี่ยนรูปใน controls ต่าง ๆ ใน fabricjs ให้ไป drawImage ในฟังก์ชั่น _drawControl
โดยตรวจสอบจากตำแหน่งว่า control คือจุดไหน ตามตัวอย่างคือ tl = topleft

_drawControl: function(control, ctx, methodName, left, top) {
var rotate = new Image();
rotate.src = 'images/rotate.jpg';
if(control=="tl"){
ctx.drawImage(skew, left, top, sizeX, sizeY);
}
},

รับทำแอพ,รับทำเว็บ,รับทำเว็บไซต์,รับทำเกมส์,รับทำแอพมือถือ,รับออกแบบเว็บไซต์,รับทำอินโฟกราฟฟิค,รับทำ Mobile Application

ติดต่อ โทร. 02-962-1556
http://www.codebee.co.th

กระทู้ใกล้เคียง

HTML5 Canvas เซฟรูปจากแคนวาสด้วย jQuery Ajax และ P... HTML5 Canvas เซฟรูปจากแคนวาสด้วย jQuery Ajax และ PHP ตัวอย่าง HTML5 Canvas เซฟรูป การเขียนโปรแกรมด้วย Javascript บนแคนวาส Canvas เป็นความส...
HTML5 เริ่มต้นเขียนเว็บแอพพลิเคชั่นด้วย Canvas... HTML5 เริ่มต้นเขียนเว็บแอพพลิเคชั่นและเกมส์ด้วย Canvas Canvas คือ Element อย่างหนึ่งเป็นคุณสมบัติที่เกิดขึ้นมาพร้อมกับภาษา HTML5 เป็นหนึ่งในหลาย ๆ ...
Fabric.js เขียนโปรแกรมบน HTML5 Canvas... Fabric.js เขียนโปรแกรมบน HTML5 Canvas
html5 Canvas วิธีทำ Animation จาก Sprite Sheet... html5 Canvas วิธีทำ Animation จาก Sprite Sheet html5 Canvas วิธีทำ Animation จาก Sprite Sheet ( Frame by frame ) Sprite Sheet หมายถึงรูปแผ่นใหญ่ที...

Comments

comments