บทความนี้แบ่งปันหลักการการใช้งานรหัสการใช้งานและปัญหาที่พบในกระบวนการดำเนินการของการลบภาพเคลื่อนไหวเพื่อการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
หลักการ คือการลบภาพบางอย่างบนอุปกรณ์มือถือและแสดงภาพอื่นโดยใช้ผ้าใบเพื่อใช้งาน
หากผู้ใช้ลบด้วยตนเองคุณต้องฟัง TouchMove, TouchEnd และเหตุการณ์อื่น ๆ คำนวณพิกัดที่เกี่ยวข้องและใช้ ClearRect หรือแก้ไขของ Canvas เพื่อวาดส่วนโค้งหรือเส้นเพื่อให้ได้สิ่งนี้ อย่างไรก็ตามสิ่งนี้จะทำให้เกิดความล่าช้าบนโทรศัพท์ Androd
Canvas มีคุณสมบัติ GlobalCompositeOperation ค่าเริ่มต้นของคุณสมบัตินี้คือแหล่งที่มานั่นคือมันจะถูกซ้อนทับเมื่อคุณวาดบนพิกเซลที่มีอยู่ อย่างไรก็ตามมีคุณลักษณะอื่นที่เป็นปลายทางออกนั่นคือเมื่อแสดงภาพเป้าหมายของคุณนอกอิมเมจต้นทางนั่นคือเมื่อวาดตามพิกเซลที่มีอยู่พิกเซลที่มีอยู่ในพื้นที่ที่คุณวาดจะถูกตั้งค่าให้โปร่งใส ด้วยแอตทริบิวต์นี้หมายความว่าคุณไม่จำเป็นต้องใช้ชุดของฟังก์ชั่นเช่นคลิป คุณสามารถใช้เส้นหนาหรือส่วนโค้ง สิ่งนี้จะช่วยลดการโทรไปยังสภาพแวดล้อมการวาด API ปรับปรุงประสิทธิภาพและทำงานบน Android ได้ราบรื่นขึ้นมาก
นี่คือ รหัสลบ ของฉัน:
ให้ requestanimationFrame = window.requestanimationFrame || window.mozrequestimationframe || window.webkitrequestanimationframe || window.msrequestanimationframe; ให้ CancelimationFrame = window.cancelanimationFrame || window.mozcancelimationframe; ให้ a = 60; ให้ canvascleaner = document.getElementById ('cas-1'); ให้ ctxcleaner = canvascleaner.getContext ('2d'); ให้ Canvascleanerbox = document.querySelector ('Slide-4'); canvascleanerbox.clientwidth * 2; canvascleaner.height = canvascleanerbox.clientheight * 2; canvascleaner.style.width = canvascleanerbox.clientwidth + 'px'; 'px'; imgcleaner.src = 'https://gw.alicdn.com/tps/tb1xbyckvxxxxxxxxxxxxxxxxx -1080-1920.jpg'; w = canvascleaner.width*(imgcleaner.height/imgcleaner.width); ctxcleaner.drawimage (imgcleaner, 0, 0, canvascleaner.width, w); ctxCleaner.linEcap = 'round'; // ชุดคุณสมบัติ linecap หรือส่งคืนรูปแบบของฝาครอบบรรทัดที่ส่วนท้ายของบรรทัด ctxcleaner.linejoin = 'round'; ctxCleaner.lineWidth = 100; // ตั้งค่าหรือส่งคืนความกว้างของบรรทัดปัจจุบัน ctxcleaner.globalcompositeOperation = 'ปลายทางออก';} ให้ drawline = (x1, y1, ctx) => {ctx.save (); ctx.beginpath (); ctx.arc (x1, y1, a, 0, 2 * math.pi); ctx.fill (); // วิธีการเติม () เติมภาพปัจจุบัน (เส้นทาง) สีเริ่มต้นเป็นสีดำ ctx.restore ();};/* d เพื่อลบพิกัดของจุดพื้นที่ข้อมูลที่ฉันได้รับโดยการจำลองรูปร่างที่ต้องลบด้วยตัวเองมีความคล้ายคลึงกับต่อไปนี้: ให้ d2 = [ [1,190], [30,180], [60,170], [90,168], [120,167], [150,165], [180,164], [210,163], [240,160], [270,159] [390,150], [420,140], [450,130], [480,120], [510,120], [540,120], [570,120], [600,120], [630,120], [660,120] [690,120], [720,120], [1,190], [20,189], [28,186], [45,185], [50,185], [62,184], [64,182], [90,180], [120,178] [160,176], [200,174], [240,172];*/let draw = (d, ctx) => {ถ้า (idx> = d.length) {cancelimationframe (ts); } else {drawline (d [idx] [0], d [idx] [1], ctx); idx ++; RequestAnimationFrame (() => {draw (d, ctx);}); -เนื่องจากฉันแสดงภาพเคลื่อนไหวลบโดยตรงบนหน้าและไม่ต้องการให้ผู้ใช้เช็ดตัวเองดังนั้นพิกัดของพื้นที่ลบจะถูกคำนวณด้วยตัวเอง จากนั้นใช้ RequestAnimationFrame เพื่อใช้แอนิเมชั่น ฉันเริ่มใช้ setInterval ฉันพบว่า setInterval จะยุ่งเหยิงในภายหลังดังนั้นจึงขอแนะนำให้ไม่ใช้ setInterval
ในกระบวนการของการบรรลุเอฟเฟกต์นี้ฉันพบว่า เมื่อใช้ผืนผ้าใบเพื่อวาดภาพบนหน้าภาพจะพร่ามัวมาก?
ปรากฎว่า เป็นเพราะมีคุณสมบัติ DevicePixelRatio ในตัวแปรหน้าต่างของเบราว์เซอร์ซึ่งกำหนดว่าเบราว์เซอร์จะใช้คะแนนพิกเซล (ปกติ 2) จุดเพื่อแสดงพิกเซล นั่นคือสมมติว่าค่าของ devicepixelratio คือ 2 ภาพที่มีขนาด 100*100 พิกเซลจะแสดงผลด้วยความกว้าง 2 พิกเซลในภาพ ดังนั้นภาพจะครอบครอง 200*200 พิกเซลบนหน้าจอเรตินาซึ่งเทียบเท่ากับภาพที่ขยายสองครั้งดังนั้นภาพจึงเบลอ
วิธีนี้ปัญหาเกี่ยวกับผ้าใบจะได้รับการแก้ไขได้ง่าย เราสามารถรักษาผืนผ้าใบเป็นภาพได้ เมื่อเบราว์เซอร์แสดงผลผ้าใบมันจะใช้ความกว้างของ 2 พิกเซลในการแสดงภาพผืนผ้าใบดังนั้นภาพที่วาดหรือข้อความจะเบลอในอุปกรณ์เรตินาส่วนใหญ่
ในทำนองเดียวกันยังมีคุณสมบัติ webkitbackingstorepixelratio (เฉพาะ Safari และ Chrome) ในบริบทของผืนผ้าใบ มูลค่าของคุณสมบัตินี้กำหนดว่าเบราว์เซอร์จะใช้หลายพิกเซลเพื่อจัดเก็บข้อมูลผ้าใบก่อนที่จะแสดงผลผ้าใบ ค่าใน Safari ภายใต้ iOS6 คือ 2 ดังนั้นหากภาพ 100*100 ถูกวาดใน Safari ภาพจะสร้างภาพ 200*200 ในหน่วยความจำแล้วเมื่อเบราว์เซอร์แสดงผลมันจะทำให้มันเป็นภาพ 100x100 อย่างไรก็ตามมีการบิดเบือนใน Safari ใน Chrome และ IOS7 เหตุผลก็คือค่า WebKitbackingStorePixelRatio ของ Safari ใน Chrome และ iOS7 เป็นทั้ง 1
สารละลาย:
Canvas.width = CanvasBox.ClientWidth * 2; Canvas.Height = CanvasBox.ClientHeight * 2; Canvas.style.width = Canvas.ClientWidth + 'Px'; Canvas.style.height = Canvas.ClientHeight * '; Canvas.width*(img.height/img.width); // console.log (w); ctx.drawimage (img, 0, 0, canvas.width, w);
นั่นคือคุณสามารถสร้างผืนผ้าใบที่มีขนาดจริงสองเท่าจากนั้นใช้สไตล์ CSS เพื่อ จำกัด ผืนผ้าใบให้มีขนาดจริง หรือใช้ polyfill นี้บน GitHub แต่ฉันลองแล้วและดูเหมือนจะไม่ได้ผล
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น