طريقة تطبيق رسم خط شريط مطاطي على القماش

يمكن أن يمتد رسم الإصبع مثل الشريط المطاطي. .

المثال كما يلي: point_down:

الفكرة بسيطة جدًا، ما عليك سوى الانتباه إلى وظيفة رسم الشريط المطاطي، وفيما يلي ملخص لأفكار المراحل الثلاث: تحريك الماوس لأسفل، ورفع الماوس.

mousedown: سجل موضع البداية، اسحب (سجل ما إذا كان في حالة سحب) تم ضبطه على صحيح، getImageData ( 橡皮筋效果关键1 )

mousemove: احصل على موضع الموضع عند السحب، ضع ImageData ( 对应getImageData，橡皮筋效果关键2 )، ارسم خطًا مستقيمًا وفقًا للموضع وابدأ

mouseup: السحب يعود إلى خطأ

يكمن 关键في طريقتي قماش putImageData () وgetImageData (). يسجل putImageData () الصورة عند النقر بالماوس، ويقوم getImageData () باستعادتها وفقًا لذلك. إذا لم يتم تنفيذ هاتين الطريقتين، فستحدث التأثيرات التالية:

putImageData() يعادل مسح جميع الخطوط الممسوحة ضوئيًا

شفرة

 <canvas id=canvas width=600 height=400 style=border: 1px Solid black;> </canvas> <script type=text/javascript> Let Canvas = document.getElementById('canvas'), ctx = Canvas.getContext( '2d')، CanvasLeft = Canvas.getBoundingClientRect().left، //getBoundingClientRect() يحصل على موضع العنصر CanvasTop = Canvas.getBoundingClientRect().top; Let imageData; // سجل بيانات الصورة Let start = new Map([['x',null],['y',null]]); في حالة السحب Canvas.onmousedown = function (e) { Let pos = locationInCanvas(e, CanvasLeft, CanvasTop); pos.y); draw = true; // سجل بيانات الصورة imageData = ctx.getImageData(0,0,canvas.width,canvas.height); { Let pos = PositionInCanvas(e, CanvasLeft, CanvasTop); // يعادل مسح جميع الخطوط الممسوحة ضوئيًا وإعادة رسمها ctx.putImageData(imageData, 0, 0); ctx.beginPath(); ctx.moveTo(start.get('x'), start.get('y')); } } Canvas.onmouseup = function (e) { Drag = false } functionpositionInCanvas (e, CanvasLeft, CanvasTop) {// احصل على موضع النقر بالماوس في اللوحة القماشية return { x:e.clientX - CanvasLeft، y:e.clientY - CanvasTop } } </script>

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.