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

<h3>fabric&period;js เปลี่ยนรูป control ต่าง ๆ ของ fabric&period;js &sol; resize and rotate controls with custom images<&sol;h3>&NewLine;<p><&sol;br><br &sol;>&NewLine;สำหรับคนที่ใช้ fabric&period;js ในการทำแอพต่าง ๆ อาจจะมีปัญหาเกี่ยวกับการปรับแต่งหน้าตา transform tool<br &sol;>&NewLine;ตัว default ของ fabric&period;js วันนี้มาแนะนำวิธีเปลี่ยนรูปสี่เหลี่ยมเดิม ๆ ของ fabric&period;js ให้เป็นรูปตาที่เราต้องการ<br &sol;>&NewLine;<&excl;--more--><br &sol;>&NewLine;วิธีเปลี่ยนรูปใน controls ต่าง ๆ ใน fabricjs ให้ไป drawImage ในฟังก์ชั่น &lowbar;drawControl<br &sol;>&NewLine;โดยตรวจสอบจากตำแหน่งว่า control คือจุดไหน ตามตัวอย่างคือ tl &equals; topleft<&sol;p>&NewLine;<p><code>&lowbar;drawControl&colon; function&lpar;control&comma; ctx&comma; methodName&comma; left&comma; top&rpar; &lbrace;<br &sol;>&NewLine; var rotate &equals; new Image&lpar;&rpar;&semi;<br &sol;>&NewLine; rotate&period;src &equals; 'images&sol;rotate&period;jpg'&semi;<br &sol;>&NewLine; if&lpar;control&equals;&equals;"tl"&rpar;&lbrace;<br &sol;>&NewLine; ctx&period;drawImage&lpar;skew&comma; left&comma; top&comma; sizeX&comma; sizeY&rpar;&semi;<br &sol;>&NewLine; &rcub;<br &sol;>&NewLine;&rcub;&comma;<&sol;code><&sol;p>&NewLine;<p>รับทำแอพ&comma;รับทำเว็บ&comma;รับทำเว็บไซต์&comma;รับทำเกมส์&comma;รับทำแอพมือถือ&comma;รับออกแบบเว็บไซต์&comma;รับทำอินโฟกราฟฟิค&comma;รับทำ Mobile Application<&sol;p>&NewLine;<p>ติดต่อ โทร&period; 02-962-1556<br &sol;>&NewLine;http&colon;&sol;&sol;www&period;codebee&period;co&period;th<&sol;p>&NewLine;