บทความนี้จะแนะนำวิธีการปรับขนาดแคนวาสเป็นหลักโดยการตั้งค่าเมทริกซ์การแปลงของแคนวาส
ขั้นตอนแรกคือการฟังเหตุการณ์วงล้อเมาส์ ในเหตุการณ์วงล้อ จากการเลื่อนเมาส์และการเปลี่ยนแปลงครั้งก่อน การซูมและการแปลบริบทจะถูกรีเซ็ต รหัสหลักจะเป็นดังนี้:
ให้ delta = this.deltaInst; delta.bind('zoom', (data) => { delta._transform.scale.forEach((s, i) => { delta._transform.scale[i] *= data.delta > 0? 2 : 1/2; }); ให้ offsetX = data.x - delta._transform.translate[0]; delta._transform.translate[1]; delta._transform.translate[0] += -(data.delta > 0? 1 : -1/2)*offsetX; delta._transform.translate[1] -= (data. เดลต้า > 0? 1 : -1/2)*offsetY;ที่นี่สันนิษฐานว่าการซูมแต่ละครั้งจะขยาย 2 เท่า แต่ก็อาจเป็นอัตราส่วนการซูมอื่นๆ ได้เช่นกัน
ขั้นตอนแรกคือการคูณหรือหารอัตราการซูมปัจจุบันด้วย 2 ตามทิศทางการเลื่อน
ขั้นตอนที่สองคือการคำนวณการแปล แนวคิดพื้นฐานคือการคำนวณตำแหน่งที่สามารถแปลผืนผ้าใบเพื่อให้ได้ผลลัพธ์เดียวกันเมื่อปรับขนาดจุดบนพื้นผ้าใบไปยังตำแหน่งกึ่งกลางตามตำแหน่งเมาส์ใหม่
มาดูโค้ด RefreshAll กัน:
ให้ ctx = this.context; ให้ matrix = this.getTransformMatrix(); ctx.transform(...matrix); //ctx.translate(...this._transform.translate); ctx.scale(...this._transform.scale); if (!Array.isArray(รูปร่าง)) { รูปร่าง = [รูปร่าง]; } shapes.forEach( (รูปร่าง) => { รูปร่าง.render(ctx); });ขั้นแรกโค้ดจะได้รับเมทริกซ์การเปลี่ยนแปลงตามสเกลค่าสเกลและค่าการแปลที่คำนวณก่อนหน้านี้ จากนั้นส่งค่าที่สอดคล้องกันในเมทริกซ์ไปยังวิธีการแปลงของบริบท ดำเนินการแปลงที่กำหนดบนผืนผ้าใบ จากนั้นจึงดำเนินการสเกลก่อนหน้า การดำเนินการวาดที่สอดคล้องกันโดยสมบูรณ์จะให้ผลเช่นเดียวกับหลังจากการปรับขนาด~~
ในโค้ดข้างต้น ctx.transform() สามารถแทนที่ได้อย่างสมบูรณ์ด้วยวิธี ctx.translate() และ ctx.scale() ดังที่แสดงในส่วนความคิดเห็นของโค้ด พารามิเตอร์คือค่าที่คำนวณก่อนหน้านี้
รหัสที่สมบูรณ์สามารถพบได้ที่ที่อยู่ github: https://github.com/helloweilei/delta
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network