รหัสการใช้งานของกระดานวาดภาพพิกเซลแคนวาส

ในโปรเจ็กต์ล่าสุด ฉันต้องการใช้กระดานวาดภาพแบบพิกเซล ซึ่งสามารถลบกริดพิกเซลขนาดเล็กได้ การเลือกเฟรมเปลี่ยนสี และกราฟิกต่างๆ สามารถลบได้ โปรเจ็กต์ขนาดเล็กดังกล่าวอาจดูเรียบง่าย แต่มีเนื้อหามากมาย สิ่งของ.

ก่อนอื่นมากำหนดคลาสกริดพิกเซลกันก่อน

 Pixel = function (ตัวเลือก) { this.x = option.x; this.y = option.y; this.shape = option.shape; this.size = option.size ||.

x และ y แสดงถึงพิกัดของจุดศูนย์กลาง ฉันทำสิ่งนี้ตั้งแต่เริ่มต้น

 createPath: function (ctx) {if (this.shape === 'circle') {this.createCircle(ctx);} else if (this.shape === 'rect') {this.createRect(ctx);} อื่น {this.createCircle(ctx);}}, createCircle: function (ctx) {var radius = this.size / 2;ctx.arc(this.x,this.y,รัศมี,0,Math.PI*2);},createRect: function (ctx) {var point = this.getPoints(); point.forEach(function (point , i) { ctx[i == 0 ? 'moveTo' : 'lineTo'](point.x, point.y); }) ctx.lineTo(คะแนน[0].x, คะแนน[0].y);},

ตารางพิกเซลรองรับวงกลมและสี่เหลี่ยม หลังจากกำหนดเส้นทางแล้ว เส้นทางจะถูกวาดขึ้น

 วาด: ฟังก์ชั่น (ctx) {ctx.save();ctx.lineWidth=this.lineWidth;ctx. strokeStyle=this. strokeStyle;ctx.fillStyle=this.fillStyle;ctx.beginPath();this.createPath(ctx); ctx.จังหวะ();ถ้า(this.isFill){ctx.fill();}ctx.restore();}

จากนั้นสร้างตารางพิกเซลเป็นชุดผ่านการวนซ้ำ:

 สำหรับ (var i = stepX + .5; i < canvas.width; i+=stepX) {สำหรับ (var j = stepY + .5; j < canvas.height; j+=stepY) {var pixel = new Pixel({x : i,y: j,รูปร่าง: 'วงกลม'})box.push(pixel);pixel.draw(ctx);}}

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

ดังนั้นแนวทางที่ถูกต้องคือ เราควรกำหนดเส้นทางทั้งหมด และทางที่ดีควรวาดเส้นทางเหล่านั้นลงในผืนผ้าใบเป็นชุดพร้อมกัน

 //กำหนดตำแหน่งของพิกเซลสำหรับ (var i = stepX + .5; i < canvas.width; i+=stepX) {for (var j = stepY + .5; j < canvas.height; j+=stepY) { var pixel = พิกเซลใหม่ ({x: i,y: j,รูปร่าง: 'circle'})box.push(pixel);}}//การวาดภาพเป็นชุด console.time('time');ctx.beginPath();for (var c = 0; c < box.length; c++) {var วงกลม = กล่อง[c];ctx.moveTo(circle.x + 3, วงกลม.y);circle.createPath(ctx);}ctx.closePath();ctx. stroke();console.timeEnd('เวลา');

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

ข้อกำหนดของโปรเจ็กต์คือสามารถลบพิกเซลได้โดยการกดและเลื่อนเมาส์บนผืนผ้าใบ ซึ่งมีจุดความรู้สองจุด จุดแรกคือวิธีรับตารางพิกเซลบนเส้นทางการเคลื่อนไหวของเมาส์ และจุดที่สองคือปัญหาด้านประสิทธิภาพ เนื่องจาก ความต้องการของเรา ข้อกำหนดคือการดึง 80,000 คะแนน ไม่ต้องพูดถึงสิ่งอื่นใด เพียงแค่วนซ้ำจะใช้เวลาหลายสิบหรือหลายร้อยมิลลิวินาที ไม่ต้องพูดถึงการวาดและการเรนเดอร์ มาดูคำถามแรกกันก่อน:

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

 ฟังก์ชั่น sqr(x) { return x * x } ฟังก์ชั่น dist2(p1, p2) { return sqr(p1.x - p2.x) + sqr(p1.y - p2.y) } ฟังก์ชั่น distToSegmentSquared(p, v, w ) { var l2 = dist2(v, w); ถ้า (l2 == 0) กลับ dist2(p, v); ((px - vx) * (wx - vx) + (py - vy) * (wy - vy)) / l2; if (t < 0) ส่งคืน dist2(p, v); (p, w); กลับ dist2(p, { x: vx + t * (wx - vx), y: vy + t * (wy - vy) }); @description คำนวณว่าส่วนของเส้นตัดกับวงกลม* @param {x: num, y: num} p จุดศูนย์กลางวงกลม* @param {x: num, y: num} v จุดเริ่มต้นของส่วนของเส้นตรง* @param {x : num, y: num } จุดสิ้นสุดของส่วนของเส้นตรง*/ ฟังก์ชั่น distToSegment(p, v, w) { var offset = pathHeight; var minX = Math.min(vx, wx) - ชดเชย; var maxX = Math.max(vx, wx) + ชดเชย; var minY = Math.min(vy, wy) - ชดเชย; var maxY = Math.max(vy, wy) + ชดเชย; ||.px > maxX) && (py < minY || py > maxY)) { return Number.MAX_VALUE; } กลับ Math.sqrt(distToSegmentSquared(p, โวลต์, ว)); }

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

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

ช่วงนี้ฉันขี้เกียจนิดหน่อย เลยขอปล่อยไว้แบบนี้ก่อน ฉันจะมีเวลาเพิ่มฟังก์ชันในการอัปโหลดรูปภาพ พิกเซลรูปภาพ และฟังก์ชันส่งออกในภายหลัง

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network