สร้างร่างดิจิทัลแบบร่าง

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

01. รับสินทรัพย์

บทช่วยสอนนี้จะใช้ node.js. ก่อนที่เราจะเริ่มต้นให้ไปที่ filesilo เลือกเนื้อหาฟรีและเนื้อหาฟรีถัดจากบทช่วยสอนที่นี่คุณสามารถดาวน์โหลดสินทรัพย์ที่คุณต้องการสำหรับการกวดวิชา จากนั้นเรียกใช้คำสั่งด้านล่างซึ่งจะติดตั้งการพึ่งพาและเปิดเซิร์ฟเวอร์ เรากำลังใช้โหนดเพื่อสร้าง localhost และมันก็จะให้บริการเราในภายหลังสำหรับ WebSockets

 การติดตั้ง NPM
เซิร์ฟเวอร์โหนด / index.js 

02. ใช้ฟังก์ชั่น Draw ()

ใน main.js , วาด() ฟังก์ชั่นจะเป็นจุดศูนย์กลางของแอปพลิเคชันของเรา เราใช้ผ้าใบเพื่อวาดเส้นระหว่างสองจุด ต้นกำเนิด (x1, y1), เป็นที่ที่เราวางอยู่ในรูปวาดครั้งสุดท้ายและปลายทาง (x2, y2), จุดใหม่ที่เราต้องการเข้าถึง ตอนนี้เราจำเป็นต้องเรียกใช้ฟังก์ชั่นนี้เพื่อสังเกตรูปแบบการวาดรูปแบบใด ๆ

 ฟังก์ชั่นวาด (x1, y1, x2, y2) {
  // บริบทถูกกำหนดไว้ทั่วโลกใน init ()
  context.beginpath ();
  context.moveto (x1, y1);
  context.lineto (x2, y2);
  บริบท.stroke ();
} 

03. ใช้เหตุการณ์แป้นพิมพ์

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

 document.addeventlistener ('keydown', ฟังก์ชั่น (e) {
  / * สวิตช์ KeyCode ไปที่นี่ * /
  Draw (Math.Floor (Prev_horizontal), Math.Floor (Prev_vertical), Math.Floor (แนวนอน), Math.Floor (แนวตั้ง));
  prev_vertical = แนวตั้ง;
  prev_horizontal = แนวนอน;
}); 

04. ปรับขนาดผืนผ้าใบ

คุณอาจสังเกตเห็นว่าองค์ประกอบผ้าใบของเรายังไม่มีขนาดที่กำหนดไว้ สำหรับกระดานวาดภาพของเราเราจะต้องการพื้นที่ที่ใหญ่กว่าบางทีแม้แต่หน้าต่างทั้งหมด รหัสด้านล่างดูแลเหตุการณ์ปรับขนาด แต่อย่าลืมโทร adjustframe () ใน ในนั้น() เช่นกัน

 ฟังก์ชั่น adjustframe () {
  // หมายถึงผ้าใบทั่วโลกใน init ()
  canvas.width = window.innerwidth;
  Canvas.Height = Window.innerHeight;
}
window.addeventlistener ('ปรับขนาด' ปรับเปลี่ยน); 

05. เพิ่มกรอบ

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

 var framemarginvertical = 122;
var framemarginhorizontal = 62;
ฟังก์ชั่น adjustframe () {
  canvas.width = window.innerwidth - framemarginhorizontal;
  Canvas.Height = Window.innerHeight - Framemarginvertical;
} 

06. สร้างหน้าปัด

เราได้ให้ CSS แก่คุณแล้วสำหรับหน้าปัด สาธารณะ / css / styles.css ดังนั้นอย่าลังเลที่จะดู ถัดไปเพิ่มสอง & lt; div & gt; แท็กภายใต้ & lt; canvas & gt; ในไฟล์ HTML ตามที่อธิบายไว้ด้านล่าง ในฐานะที่เป็นอนุสัญญาเราจะใช้หน้าปัดด้านซ้ายสำหรับการวาดแนวนอนและเหมาะสำหรับแนวตั้ง เรากำลังเพิ่มตัวแปรใหม่ให้กับ ในนั้น() ฟังก์ชั่นเพื่อเตรียมความพร้อมสำหรับเหตุการณ์แบบสัมผัส

 & lt; div id = "diallhorizontal" class = "dial" & gt; & lt; / div & gt;
& lt; div id = "dialvertical" class = "dial" & gt; & lt; / div & gt; 

 var targetleft = document.getElementbyid ('dialhorizontal');
Var Regionleft = New Zingtouch.Region (TargetLeft);
Var TargetRight = Document.GetElementByID ('Dialvertical');
Var Regionright = New Zingtouch.Region (Targetright); 

07. ใช้ Zingtouch

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

 Regionleft.bind (targetleft, 'หมุน', ฟังก์ชั่น (e) {
  ถ้า (e.detail.distancefromlast & lt; 0) {
  --horizontal;
  } อื่น {
  ++ แนวนอน;
  }
  enterhorizontal + = e.detail.distancefromlast;
  targetleft.style.transform = 'หมุน (' + engyhorizontal + 'deg)';
  Draw (Math.Floor (Prev_horizontal), Math.Floor (Prev_vertical), Math.Floor (แนวนอน), Math.Floor (Prev_vertical));
  prev_horizontal = แนวนอน;
}); 

08. ใช้ขอบเขตการโทร

ในการปิดกั้นบรรทัดจากการออกนอกจอเราใช้ Candraw () ฟังก์ชั่นซึ่งส่งคืนบูลีน เราผ่านทิศทางทั้ง 'แนวนอน' หรือ 'แนวตั้ง' และค่าของตัวแปรแนวนอนหรือแนวตั้ง เราเรียกฟังก์ชั่นนี้ในฟัง 'หมุน' ของหน้าปัดทั้งสองและถ้า 'จริง' เราจะเพิ่มมุมและเรียก วาด() ฟังก์ชั่น.

 ฟังก์ชั่น Candraw (ทิศทางค่า) {
  Var Max = (Direction === 'แนวนอน')? (Canvas.Width) :( Canvas.Height);
  ถ้า (value & lt; 2 || value & gt; max - 2) {
  กลับเท็จ;
  }
  กลับจริง;
} 

09. หลีกเลี่ยงปัญหาการกด

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

 ถ้า (candraw ('แนวนอน' แนวนอน)) {
  enterhorizontal + = e.detail.distancefromlast;
  targetleft.style.transform = 'หมุน (' + engyhorizontal + 'deg)';
  Draw (Math.Floor (Prev_horizontal), Math.Floor (Prev_vertical), Math.Floor (แนวนอน), Math.Floor (Prev_vertical));
  prev_horizontal = แนวนอน;
} อื่น {
  แนวนอน = prev_horizontal;
} 

10. รับกระดานวาดภาพบนแท็บเล็ตของคุณ

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

ต่อไปเราจะใช้ Safari และการพัฒนาเมนูเพื่อตรวจสอบแอปพลิเคชันบน iPad สำหรับอุปกรณ์ Android ใช้ Chrome: // ตรวจสอบ .

11. ทดสอบ accelerometer

เชื่อมต่อแท็บเล็ตของคุณกับคอมพิวเตอร์ของคุณผ่าน USB และตรวจสอบแอปพลิเคชันโดยใช้เครื่องมือนักพัฒนา

ด้วยรหัสด้านล่างในสถานที่คุณควรจะเห็นค่าการเร่งความเร็วต่าง ๆ ในขณะที่คุณย้ายอุปกรณ์ของคุณไปรอบ ๆ ในการรีเซ็ตผืนผ้าใบเราตัดสินใจที่จะพิจารณาการเร่งความเร็วบนแกน X มากกว่า 5 และลดความทึบอย่างช้าๆ ( ลบล้าง .

 var eraserate = 1; / * กำหนดเป็นตัวแปรทั่วโลก * /
window.addeventlistener ('devicemotion', ฟังก์ชั่น (กิจกรรม) {
  console.log ('การเร่งความเร็ว ::', เหตุการณ์การเชื่อมต่อ);
  ถ้า (event.acceleration.x & gt; 5) {
  ลบ - = math.abs (event.acceleration.x / 100);
  console.log ('ลบ ::', ลบ);
  }
}); 

12. เขย่าเพื่อลบ

เราเคยเห็นในขั้นตอนก่อนหน้านี้วิธีการตรวจสอบการเคลื่อนไหวและการเร่งความเร็ว ตอนนี้เราต้องโทร fadedrawing () เมื่อเงื่อนไขของเราพบกัน ในกรณีนี้เราวาดสำเนาผืนผ้าใบที่แน่นอนในความทึบที่แตกต่างกัน

รีเซ็ต globalalpha เป็น 1 ใน วาด() และตั้งค่า globalCompositeOperation กลับไปที่แหล่งข้อมูล

 ฟังก์ชั่น fadedrawing () {
  ถ้า (ลบล้าง & lt; 0) {
  context.clearrect (0, 0, canvas.width, canvas.Height);
  ลบ = 1;
  กลับ;
  }
  context.globalalpha = ลบ;
  context.globalCompositeOperation = 'คัดลอก';
  context.drawimage (ผ้าใบ, 0, 0);
} 

13. ทำให้ดูเหมือนเรื่องจริง

จนถึงตอนนี้แอปพลิเคชันของเราดูค่อนข้างอ่อนโยนและแบน เพื่อที่จะให้ความลึกบางอย่างเราจะเพิ่มสีกรอบเงาภายในเฟรมและปริมาตรเล็กน้อยบนหน้าปัด CSS สำหรับ The Dial Shadows มีอยู่แล้ว แต่คุณจะต้องเพิ่มองค์ประกอบทั้งสองเหล่านั้นในตอนท้ายของร่างกาย

ทำ CSS ให้สมบูรณ์สำหรับองค์ประกอบที่แนะนำที่นี่:

 & lt; div id = "dialshadowhorizontal" class = "เงา" & gt; & lt; / div & gt;
& lt; div id = "dialshadowvertical" class = "เงา" & gt; & lt; / div & gt; 

 ร่างกาย {
  พื้นหลัง: # 09cbf7;
}
#sketch {
  กล่อง - เงา: 2px 2px 10px RGBA (0, 0, 0, .25)
} 

14. ใช้ WebSockets

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

15. ตรวจจับขนาดอุปกรณ์

ในไฟล์ HTML หลักให้แทนที่ main.js ด้วย extra.js . หลังมีทั้งหมดที่เราทำจนถึงขณะนี้ด้วยการดัดแปลงเพื่อจัดการกับอุปกรณ์และซ็อกเก็ตซึ่งเราจะตรวจสอบขั้นตอนต่อไปนี้ มองไปที่ DetectDevice () - วิธีนี้ตอนนี้ได้รับการเรียกว่าโหลดแทน ในนั้น() และจะตัดสินใจว่า 'โหมด' เพื่อจัดการกับแอปพลิเคชัน

ด้านล่างนี้เป็นกรณีที่ตรวจพบโทรศัพท์:

 ถ้า (window.innerwidth & lt; 768) {
  ซ็อกเก็ต = io.connect ();
  document.queryselector ('# sketch') ลบ ();
  var dials = document.queryselectorall ('โทร, .shadow');
  [] .foreach.call (หน้าปัดฟังก์ชั่น (รายการ) {
  item.classlist.add ('ใหญ่');
  });
  iscontrols = true;
  Framemarginvertical = 62;
  ซ็อกเก็ต.Emit ('พร้อม', {'พร้อม': 'การควบคุม'});
} 

16. จากโทรศัพท์ไปยังคอมพิวเตอร์

ตลอด extra.js คุณจะสังเกตเห็นรหัสของรหัสเช่น socket.emit () หรือ Socket.on () . นี่คือตัวปล่อยและผู้ฟังสำหรับอินสแตนซ์การควบคุม (โทรศัพท์) และหน้าจอ (คอมพิวเตอร์) ของเรา ทุกเหตุการณ์ที่ปล่อยออกมาจำเป็นต้องผ่านเซิร์ฟเวอร์เพื่อแจกจ่ายให้กับซ็อกเก็ตที่เชื่อมต่อทั้งหมด ใน เซิร์ฟเวอร์ \ index.js เพิ่มผู้ฟังอีกสองสามตัวในฟังก์ชั่น 'การเชื่อมต่อ' และรีสตาร์ทเซิร์ฟเวอร์โหนด

 Socket.on ('วาด' ฟังก์ชั่น (ข้อมูล) {
  io.sockets.emit ('วาด', ข้อมูล);
});
Socket.on ('ลบ' ฟังก์ชั่น (ข้อมูล) {
  io.sockets.emit ('ลบ', ข้อมูล);
});
Socket.on ('ปรับเปลี่ยน' ฟังก์ชั่น (ข้อมูล) {
  screenwidth = data.screenwidth;
  ScreenHeight = Data.ScreenHeight;
  io.sockets.emit ('ปรับเปลี่ยน' ข้อมูล);
}); 

17. แก้ไขการวางแนวโทรศัพท์

เยี่ยมชม localhost ในคอมพิวเตอร์ของคุณในขณะที่เข้าถึงโทรศัพท์ของคุณจากระยะไกล (เช่นที่คุณเคยทำจากแท็บเล็ตของคุณ) ตอนนี้คุณควรเห็นบรรทัดที่ถูกวาดบนหน้าจอของคุณในขณะที่หมุนหน้าปัดบนโทรศัพท์ของคุณ อย่างไรก็ตามคุณจะสังเกตเห็นว่าหน้าปัดไม่พอดีอย่างถูกต้องหากโทรศัพท์อยู่ในโหมดแนวตั้ง

เราสามารถแก้ไขปัญหานี้ได้ด้วย CSS:

 @Media หน้าจอและ (การวางแนว: แนวตั้ง) {
  .dial.big # dialvertical, .shadow.big # dialshadowvertical {
  ขวา: Calc (50% - 75px);
  ด้านล่าง: 20px;
  ด้านบน: อัตโนมัติ;
  }
  .dial.big # dialhorizontal, .shadow.big # dialshadowhorizontal {
  ซ้าย: Calc (50% - 75px);
  ด้านบน: 20px;
  }
} 

18. ทำให้ของเล่นสมจริงยิ่งขึ้น

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

ตั้งผู้ฟังเหล่านี้ใน ในนั้น() และสำรวจฟังก์ชั่นที่เรียกว่า:

 ถ้า (พิมพ์ === 'ทั้งหมด') {
  Canvas.addeventListener ('TouchStart' ฟังก์ชั่น (E) {
  e.preventDefault ();
  Drawfingerprint (e.layerx, e.layery, true);
  });
  canvas.addeventristener ('touchend', ฟังก์ชั่น (e) {
  hidefingerprint (e.layerx, e.layery);
  });
} 

19. บันทึกสำเนาของผืนผ้าใบ

ใน DrawFingerprint () วิธีการก่อนที่เราจะทำอะไรอย่างอื่นเราบันทึกสำเนาของสถานะปัจจุบันของผืนผ้าใบกับองค์ประกอบที่ซ่อนอยู่ที่เราใช้เพื่อเรียกคืนรูปวาดของเราเมื่อล้างการพิมพ์ ที่เกิดขึ้นในการสัมผัสครั้งแรกเท่านั้นและไม่ได้อยู่ในการโทรที่ตามมาที่เพิ่มขนาดของการพิมพ์ทุก ๆ 100ms

 ฟังก์ชั่น DrawFingerPrint (XPOS, YPOS, Savecanvas) {
  / * ฟังก์ชั่นบางส่วน, อ้างถึง extra.js * /
  ถ้า (Savecanvas) {
  hiddencanvas = document.createelement ('canvas');
  var hiddencontext = hiddencanvas.getcontext ('2d');
  hiddencanvas.width = canvas.width;
  Hiddencanvas.Height = Canvas.Height;
  hiddencontext.drawimage (canvas, 0, 0);
  }
} 

20. เรียกใช้แอปพลิเคชันแบบออฟไลน์

ตอนนี้คุณสามารถทำให้ใบสมัครแบบสแตนด์อโลนได้อย่างแท้จริงโดยการบันทึกลงในแท็บเล็ตของคุณเป็นแอปหน้าจอหลัก เราจะไม่สามารถทำเช่นเดียวกันสำหรับโทรศัพท์เนื่องจากต้องการการเชื่อมต่อกับเซิร์ฟเวอร์ ใน / สาธารณะ ค้นหาไฟล์ชื่อ Sketch.AppCache และแทนที่อินสแตนซ์ทั้งหมดของ 'localhost' ทั้งหมดตามที่อยู่ IP ของคุณ

ตอนนี้แก้ไข HTML เพื่ออ่านดังนี้:

 & lt; html lang = "en" manifest = "sketch.appcache" & gt; 

21. บันทึกแอปพลิเคชัน

ตอนนี้เยี่ยมชมแอปพลิเคชันอีกครั้งบนแท็บเล็ตของคุณแล้วเลือกตัวเลือกเพิ่มไปยังหน้าจอหลัก ไอคอนใหม่ควรปรากฏบนเดสก์ท็อปของคุณ เปิดมันหนึ่งครั้งในขณะที่ยังคงเชื่อมต่อกับ localhost ของคุณจากระยะไกล Manifest แคชที่เราตั้งค่าก่อนหน้านี้จะดาวน์โหลดไฟล์ที่จำเป็นทั้งหมดสำหรับการใช้งานออฟไลน์ในพื้นหลัง เปิด Wi-Fi และเปิดแอปอีกครั้ง voilà!

บทความนี้ปรากฏในเดิม นิตยสารออกแบบเว็บไซต์ ปัญหา 263. ซื้อมัน ที่นี่ .

อ่านเพิ่มเติม:

• 15 เว็บ API ที่คุณไม่เคยได้ยินมาก่อน
• คู่มือการเริ่มต้นในการออกแบบภาพเคลื่อนไหวของอินเตอร์เฟส
• คำแนะนำในการเขียน CSS ที่ดีกว่า