วิธีการเขียนเส้นยางรัดผ้าใบ

การวาดนิ้วสามารถยืดได้เหมือนหนังยาง -

ตัวอย่างจะเป็นดังนี้: point_down:

แนวคิดนี้ง่ายมาก คุณจะต้องใส่ใจกับฟังก์ชันการวาดแถบยางเท่านั้น ต่อไปนี้จะสรุปแนวคิดของการวางเมาส์ลง การย้ายเมาส์ และการวางเมาส์ขึ้น

mousedown: บันทึกตำแหน่งเริ่มต้น, การลาก (บันทึกว่าอยู่ในสถานะการลากหรือไม่) ตั้งค่าเป็นจริง, getImageData ( 橡皮筋效果关键1 )

mousemove: รับตำแหน่ง pos เมื่อลาก, putImageData ( 对应getImageData，橡皮筋效果关键2 ), วาดเส้นตรงตาม pos และ start

mouseup:drag เปลี่ยนกลับเป็นเท็จ

关键อยู่ในเมธอด canvas สองแบบคือ putImageData() และ getImageData() putImageData() จะบันทึกรูปภาพเมื่อคลิกเมาส์ และ getImageData() จะกู้คืนรูปภาพตามนั้น หากไม่ดำเนินการทั้งสองวิธีนี้ จะเกิดผลกระทบต่อไปนี้:

putImageData() เทียบเท่ากับการลบบรรทัดที่สแกนทั้งหมด

รหัส

 <canvas id=canvas width=600 height=400 style=border: 1px solid black;> </canvas> <script type=text/javascript> ให้ canvas = document.getElementById('canvas'), ctx = canvas.getContext( '2d'), canvasLeft = canvas.getBoundingClientRect().left, //getBoundingClientRect() รับตำแหน่งองค์ประกอบ canvasTop = canvas.getBoundingClientRect().top; ให้ imageData; //บันทึกข้อมูลภาพ ให้เริ่มต้น = new Map([['x',null],['y',null]]); ในสถานะการลาก canvas.onmousedown = function (e) { la pos =positionInCanvas(e, canvasLeft, canvasTop); start.set('x', pos.x); pos.y); drag = true; // บันทึก imageData imageData = ctx.getImageData(0,0,canvas.width,canvas.height); } canvas.onmousemove = function (e) { if(drag === true) { la pos = positionInCanvas(e, canvasLeft, canvasTop); // เทียบเท่ากับการลบบรรทัดที่สแกนทั้งหมดและวาด ctx.putImageData ใหม่ (imageData, 0, 0); ctx.beginPath(); ctx.moveTo(start.get('x'), start.get('y')); ctx.lineTo(pos.x, pos.y); ; } } canvas.onmouseup = function (e) { drag = false; } functionpositionInCanvas (e, canvasLeft, canvasTop) {//รับตำแหน่งการคลิกเมาส์ใน canvas return { x:e.clientX - canvasLeft, y:e.clientY - canvasTop } } </script>

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