อย่างที่เราทุกคนทราบกันดีว่า แคนวาสนั้นเป็นบิตแมป และคุณสามารถเรนเดอร์สิ่งที่คุณต้องการในนั้นได้ แต่คุณสามารถแก้ไขได้โดยการจัดการคุณสมบัติของแคนวาสเท่านั้น กล่าวคือ คุณไม่สามารถจัดการสิ่งที่วาดลงบนผืนผ้าใบได้ ตัวอย่างเช่น ถ้าฉันเพิ่มภาพวาดลงบนผืนผ้าใบ และตอนนี้ฉันต้องการย้ายภาพวาด 10px เราไม่สามารถจัดการภาพวาดได้โดยตรงเพราะเราไม่สามารถรับภาพวาดได้เลย . ข้อมูลใดๆ สิ่งที่เราทำได้คือวัตถุผืนผ้าใบ
มาถึงคำถามนี้ ฉันจะหมุนรูปภาพได้อย่างไรในความเป็นจริง canvas มีอินเทอร์เฟซที่หลากหลายเพื่อควบคุม canvas มีวิธีการหมุน ()
ที่จริงแล้ว การหมุนที่นี่ไม่ได้หมุนผืนผ้าใบจริงๆ ตัวอย่างเช่น ctx.rotate(Math.PI/2) ของฉันหมุน 90° ไม่ได้หมายความว่าเราจะเห็นผืนผ้าใบหมุน 90° บนหน้า เราเข้าใจได้ว่าจริงๆ แล้วผืนผ้าใบประกอบด้วยสองส่วน ส่วนแรกคือผืนผ้าใบที่มองเห็นได้ด้วยตาเปล่า และอีกส่วนคือผืนผ้าใบเสมือนที่ใช้สำหรับการดำเนินงาน
เรื่องนี้อาจจะเข้าใจได้ยาก เรามาลองใช้ภาพอธิบายกันดีกว่า ขั้นแรก ขอแนะนำวิธีการหมุน () ซึ่งสามารถหมุนผืนผ้าใบและหมุนจุดกำเนิดของผืนผ้าใบได้โดยค่าเริ่มต้น
มาดูผลของการหมุน 45° กัน:
ที่นี่เราจะเห็นได้ว่าผืนผ้าใบเสมือนที่ฉันเพิ่งกล่าวถึงนั้นหมุน 45° จากนั้นรูปภาพจะถูกแทรกเข้าไปในผืนผ้าใบเสมือน จากนั้นสิ่งที่ผืนผ้าใบจริงนำเสนอก็คือจุดตัดของผืนผ้าใบเสมือนและผืนผ้าใบจริง ที่นี่อาจไม่ง่ายที่จะเข้าใจ โปรดคิดให้รอบคอบ
รหัสสำหรับสองภาพมีดังนี้:
// ที่ไม่ได้หมุน var img = document.getElementById('img')var canvas = document.getElementById('canvas')var ctx = canvas.getContext(2d)ctx.drawImage(img, 0, 0)// หมุนทวนเข็มนาฬิกา 45° var img = document.getElementById('img')var canvas = document.getElementById('canvas')var ctx = canvas.getContext(2d)ctx.rotate(-Math.PI / 4);ctx.drawImage(img, 0, 0)เมื่อเห็นสิ่งนี้ ฉันคิดว่าทุกคนคงรู้วิธีใช้มันแล้ว หมุน()
เรามาพูดถึงวิธีหมุนจุดศูนย์กลางของภาพกัน
ให้ฉันพูดถึงวิธีใช้ Canvas อีกสองวิธี:
ctx.translate(x, y): วิธีนี้เป็นวิธีการที่สามารถย้ายต้นกำเนิดของผืนผ้าใบได้ พารามิเตอร์คือ x และ y;
ctx.drawImage(img, x, y): มีการใช้วิธีนี้ข้างต้น แต่มีพารามิเตอร์สามตัว ตัวแรกคือ dom ของรูปภาพที่จะแทรก และสองตัวถัดไปคือ x และ y เป็นพารามิเตอร์สำหรับ img เมื่อ การแทรกรูปภาพมีการปรับเปลี่ยนตำแหน่ง
ดังที่เห็นได้จากรูปภาพ หากคุณต้องการหมุน 45° รอบกึ่งกลางของรูปภาพ คุณจะต้องย้ายต้นกำเนิดของผืนผ้าใบไปที่กึ่งกลางของรูปภาพ จากนั้นจึงหมุนผืนผ้าใบ จากนั้นเมื่อแทรกรูปภาพ แปลรูปภาพไปที่มุมซ้ายบนครึ่งหนึ่งของรูปภาพเอง
มีสามขั้นตอนที่นี่:
มาดูสามขั้นตอนนี้แยกกัน (ความกว้างและความสูงของรูปภาพคือ 400 และ 300)
ย้ายต้นกำเนิดผ้าใบ
var img = document.getElementById('img')var canvas = document.getElementById('canvas')var ctx = canvas.getContext(2d)ctx.translate(200, 150)ctx.drawImage(img, 0, 0)หมุนผืนผ้าใบ
var img = document.getElementById('img')var canvas = document.getElementById('canvas')var ctx = canvas.getContext(2d)ctx.translate(200, 150)ctx.rotate(-Math.PI / 4) ctx.drawImage (img, 0, 0)แทรกรูปภาพและย้าย
var img = document.getElementById('img')var canvas = document.getElementById('canvas')var ctx = canvas.getContext(2d)ctx.translate(200, 150)ctx.rotate(-Math.PI / 4) ctx.drawImage (img, -200, -150)เพียงเท่านี้คุณก็เสร็จแล้ว
ป.ล.: หลังจากเสร็จสิ้นการกระทำหลายอย่าง ทุกคนจะต้องหมุนต้นกำเนิดของผืนผ้าใบเพื่อคืนค่า มิฉะนั้น หลังจากดำเนินการไปหลายชุด การตั้งค่าแคนวาสจะเกิดความยุ่งเหยิง เพียงคืนค่าการตั้งค่ากลับสู่สถานะดั้งเดิมหลังการดำเนินการแต่ละครั้ง
var img = document.getElementById('img')var canvas = document.getElementById('canvas')var ctx = canvas.getContext(2d)ctx.translate(200, 150) // 1ctx.rotate(-Math.PI / 4) // 2ctx.drawImage(img, -200, -150)// คืนค่าการตั้งค่า (ขั้นตอนในการกู้คืนควรย้อนกลับไปยังขั้นตอนที่คุณแก้ไข) ctx.rotate(Math.PI / 4) // 1ctx.translate(-200, -150) // 2// หลังจากนั้นต้นกำเนิดของ canvas กลับไปที่มุมซ้ายบน มุมการหมุนเป็น 0//การทำงานอื่นๆ...สิ่งที่ควรทราบอีกประการหนึ่งคือสิ่งที่ฉันเพิ่งแสดงให้เห็นคือตัวอย่างที่แกน x และแกน y ของรูปภาพสัมพันธ์กับผืนผ้าใบเป็น 0 หากไม่ใช่ 0 ให้ย้ายจุดเริ่มต้น ctx.translate(200+x, 150 +ป) 200 และ 150 ตรงนี้เป็นครึ่งหนึ่งของความกว้างและความสูงของรูปภาพ และ x และ y คือ x และ y ของรูปภาพที่สัมพันธ์กับผืนผ้าใบ
บทความนี้จะพูดถึงเฉพาะการหมุนตรงกลางภาพเท่านั้น ต่อไปผมจะเขียนเกี่ยวกับการหมุนและการปรับขนาดของภาพ หากมีสิ่งใดเขียนไม่ดีหรือผิดโปรดชี้ให้เห็น
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network