Tạo một etch kỹ thuật số một bản phác thảo

Trong hướng dẫn này, chúng tôi lấy đồ chơi vẽ cơ học etch một bản phác thảo như một cảm hứng và cố gắng thực hiện các tính năng này cho các thiết bị hiện đại, với các công nghệ web. Sử dụng Canvas (có tên Aptly), trước tiên chúng ta tập trung vào máy tính bảng, giống như hình dạng cho đồ chơi xác thực. Chúng ta có thể tận dụng các sự kiện cảm ứng để điều khiển các sự kiện quay số và thiết bị để xóa nội dung. Không rời khỏi điện thoại, chúng tôi cũng sẽ khám phá cách sử dụng WebSockets để nâng cao khả năng bằng cách chia các điều khiển và khu vực vẽ.

01. Lấy tài sản

Hướng dẫn này sẽ sử dụng Node.js. Trước khi bắt đầu, hãy đến Filesilo. , Chọn nội dung miễn phí và nội dung miễn phí bên cạnh hướng dẫn - Tại đây bạn có thể tải xuống tài sản bạn cần cho hướng dẫn. Sau đó chạy các lệnh bên dưới, sẽ cài đặt các phụ thuộc và khởi chạy máy chủ. Chúng tôi đang sử dụng nút để tạo một localhost. , và nó cũng sẽ phục vụ chúng tôi sau này cho WebSockets.

 Cài đặt NPM
Máy chủ Node / index.js 

02. Sử dụng hàm Draw ()

Trong main.js. , các vẽ tranh() Chức năng sẽ là điểm trung tâm của ứng dụng của chúng tôi. Chúng tôi sử dụng vải để vẽ một đường giữa hai điểm; Nguồn gốc (X1, Y1), là nơi chúng tôi rời khỏi bản vẽ của chúng tôi và đích đến (x2, y2), điểm mới mà chúng tôi muốn tiếp cận. Bây giờ chúng ta cần kích hoạt chức năng này để quan sát bất kỳ hình thức vẽ nào.

 Vẽ chức năng (X1, Y1, X2, Y2) {
  // bối cảnh được đặt trên toàn cầu trong init ()
  bối cảnh.BeginPath ();
  bối cảnh.moveto (x1, y1);
  bối cảnh.lineto (x2, y2);
  bối cảnh.stroke ();
} 

03. Thực hiện các sự kiện bàn phím

Trước khi chúng tôi thực hiện quay số, hãy nhanh chóng thêm một trình nghe bàn phím có thể kích hoạt chức năng vẽ của chúng tôi. Bạn đã được cung cấp với sự khác biệt mã hóa Trong ví dụ, nhưng bạn sẽ cần sửa đổi người nghe một chút để kích hoạt vẽ tranh() chức năng chúng tôi đã xác định trước đây. Bây giờ làm mới trình duyệt của bạn và xem những gì bạn có thể vẽ với các phím mũi tên.

 tài liệu.addeventlistener ('khóa', chức năng (e) {
  / * Chuyển đổi mã khóa đi đây * /
  vẽ (math.loor (prev_horizontal), math.loor (prev_vertal), math.floor (ngang), math.floor (dọc));
  prev_vertical = dọc;
  prev_horizontal = ngang;
}); 

04. Thay đổi kích thước vải

Bạn có thể nhận thấy rằng phần tử Canvas của chúng tôi không có kích thước được gán cho nó. Đối với bảng vẽ của chúng tôi, chúng tôi sẽ muốn có một không gian lớn hơn, thậm chí có thể cả toàn bộ cửa sổ. Mã dưới đây sẽ chăm sóc sự kiện thay đổi kích thước, nhưng đừng quên gọi Điều chỉnhFrame () trong trong đó() cũng.

 Chức năng Điều chỉnhFrame () {
  // Canvas được xác định trên toàn cầu trong init ()
  Canvas.width = window.innerwidth;
  Canvas.Height = Window.innerHeight;
Không thể
window.addeventlistener ('thay đổi kích thước', điều chỉnhFrame); 

05. Thêm một khung

Chúng tôi muốn ứng dụng trông giống như đồ chơi ban đầu càng nhiều càng tốt, vì vậy chúng tôi muốn thêm một khung xung quanh khu vực vẽ. Để làm như vậy, chúng ta có thể xác định giá trị ký quỹ và sửa đổi CSS cho #sketch. Để lề: 20px Auto; để trung tâm khung vẽ theo chiều ngang và giữ một không gian lớn hơn ở dưới cùng cho mặt số.

 var framemarginvertoric = 122;
var framemarginhorizetal = 62;
Chức năng Điều chỉnhFrame () {
  Canvas.width = window.innerwidth - framemarginihorizal;
  Canvas.height = window.innerheight - framemarginvertic;
} 

06. Tạo mặt số

Chúng tôi đã cho bạn CSS cho các mặt số trong Công khai / CSS / Kiểu dáng.css , Vì vậy, hãy thoải mái để có một cái nhìn. Tiếp theo, thêm hai & lt; div & gt; Tags theo & lt; canvas & gt; Trong tệp HTML, như được mô tả dưới đây. Là một hội nghị, chúng ta sẽ sử dụng mặt số bên trái để vẽ ngang và phải theo chiều dọc. Chúng tôi cũng đang thêm các biến mới vào trong đó() chức năng để chuẩn bị cho các sự kiện cảm ứng.

 & lt; div id = "dialhorizontal" class = "quay số" & gt; & lt; / div & gt;
& lt; div id = "dormvertical" class = "quay số" & gt; & lt; / div & gt; 

 var targetleft = document.getelementbyId ('dialthorizontal');
var vùngleft = New ZingTouch.Region (Targetleft);
var targetright = document.getelementById ('quay số');
var obesright = New ZingTouch.Region (Targetright); 

07. Sử dụng zingtouch.

ZingTouch là một thư viện JavaScript có khả năng phát hiện các cử chỉ cảm ứng khác nhau và cũng sẽ xử lý các sự kiện chuột. Nó được cung cấp cho bạn trong / Công cộng / Lib / thư mục, như chúng ta sử dụng nó để kiểm soát mặt số của chúng tôi. Dưới đây là việc thực hiện đối với điều khiển trái; Bạn sẽ cần phải nhân rộng và sửa đổi nó cho phía bên kia.

 khu vựcLeft.bind (targetleft, 'xoay', chức năng (e) {
  if (e.detail.distancefrast & lt; 0) {
  - hy sinh;
  } other {
  ++ ngang;
  Không thể
  AngleHorIZontal + = e.detail.distanceFrast;
  targetleft.style.transform = 'Xoay (' + AngleHorIZontal + 'deg)';
  vẽ (math.loor (prev_horizontal), math.loor (prev_vertical), math.floor (ngang), math.floor (prev_vertical));
  prev_horizontal = ngang;
}); 

08. Thực hiện giới hạn quay số

Để chặn các dòng khỏi màn hình, chúng tôi sử dụng có thể vẽ() chức năng, trả về một boolean. Chúng tôi vượt qua hướng, hoặc 'ngang' hoặc 'dọc' và giá trị của biến ngang hoặc dọc. Chúng tôi gọi chức năng này trong Trình nghe 'Xoay' của cả hai mặt số và chỉ khi 'TRUE' chúng ta sẽ tăng góc và gọi là vẽ tranh() chức năng.

 Hàm Candraw (hướng, giá trị) {
  var max = (hướng === 'ngang')? (Canvas.width) :( canvas.height);
  Nếu (giá trị & lt; 2 | | giá trị & gt; Max - 2) {
  trả lại sai;
  Không thể
  Trả về đúng;
} 

09. Tránh các vấn đề quay số

Với giới hạn mà chúng tôi vừa triển khai, có khả năng quay số có thể bị kẹt ở một đầu nếu giá trị diễn ra trên giới hạn, thậm chí theo một dấu thập phân. Để tránh tình huống này, chúng ta nên xử lý trường hợp có thể vẽ() là sai và đặt lại giá trị thành một giá trị hợp lệ trước đó, như được hiển thị ở đây cho bộ điều khiển ngang:

 Nếu (Candraw ('ngang', ngang)) {
  AngleHorIZontal + = e.detail.distanceFrast;
  targetleft.style.transform = 'Xoay (' + AngleHorIZontal + 'deg)';
  vẽ (math.loor (prev_horizontal), math.loor (prev_vertical), math.floor (ngang), math.floor (prev_vertical));
  prev_horizontal = ngang;
} other {
  ngang = prev_horizontal;
} 

10. Lấy bảng vẽ trên máy tính bảng của bạn

Nó luôn luôn được khuyến nghị để kiểm tra các thiết bị được nhắm mục tiêu của bạn càng sớm càng tốt. Ứng dụng của chúng tôi hiện đang ở trong một hình dạng tốt, và có thể đáp ứng với các sự kiện chạm vào. Thực hiện theo các bước để truy cập localhost từ xa để có được bảng vẽ trên máy tính bảng của bạn.

Tiếp theo, chúng tôi sẽ sử dụng Safari và menu Phát triển để kiểm tra ứng dụng trên iPad. Đối với thiết bị Android, sử dụng Chrome: // Kiểm tra .

11. Kiểm tra gia tốc kế

Kết nối máy tính bảng của bạn với máy tính của bạn thông qua USB và kiểm tra ứng dụng bằng các công cụ dành cho nhà phát triển.

Với mã dưới đây, bạn sẽ có thể thấy các giá trị gia tốc khác nhau, khi bạn di chuyển thiết bị của mình xung quanh. Để thiết lập lại khung vẽ, chúng tôi đã quyết định xem xét khả năng tăng tốc trên trục X trên 5 và giảm dần độ mờ đục ( xóa ).

 var eredate = 1; / * Xác định là một biến toàn cục * /
window.addeventlistener ('deviceemotion', hàm (sự kiện) {
  Console.log ('Gia tốc ::', Event.acceler sinh);
  if (event.acceleren.x & gt; 5) {
  xóa - = math.abs (event.acceleren.x / 100);
  Console.log ('Xóa ::', xóa);
  Không thể
}); 

12. Lắc để xóa

Chúng tôi đã thấy trong bước trước Cách kiểm tra chuyển động và tăng tốc. Bây giờ chúng ta cần gọi fadedrawing () Khi tình trạng của chúng tôi được đáp ứng. Trong trường hợp này, chúng tôi đã vẽ lại một bản sao chính xác của khung vẽ ở độ mờ khác nhau.

Đặt lại GlobalAlpha thành 1 trong vẽ tranh() và đặt. toàn cầu trở lại nguồn-qua.

 Chức năng FadedRawing () {
  NẾU (XÁC NHẬN & LT; 0) {
  bối cảnh.CleaRect (0, 0, canvas.width, canvas.height);
  tẩy = 1;
  trở về;
  Không thể
  bối cảnh.globalalpha = xóa;
  bối cảnh.globalomposeopperation = 'Sao chép';
  bối cảnh.DrawImage (Canvas, 0, 0);
} 

13. Làm cho nó trông giống như thỏa thuận thực sự

Cho đến nay, ứng dụng của chúng tôi trông khá nhạt nhẽo và căn hộ. Để cung cấp cho nó một số độ sâu, chúng ta sẽ thêm một màu khung, một bóng bên trong khung và một chút âm lượng trên mặt số. CSS cho bóng quay số đã được cung cấp, nhưng bạn sẽ cần thêm hai yếu tố đó vào cuối cơ thể.

Hoàn thành CSS cho các yếu tố được đề xuất ở đây:

 & lt; div id = "dialshadowhorizontal" class = "bóng" & gt; & lt; / div & gt;
& lt; div id = "dialshadowvertical" class = "bóng" & gt; & lt; / div & gt; 

 cơ thể {
  Bối cảnh: # 09cbf7;
Không thể
#sketch {
  Box-Shadow: 2px 2px 10px RGBA (0, 0, 0, 0.25) Interet;
} 

14. Sử dụng WebSockets.

Khi bắt đầu hướng dẫn này, chúng tôi đã đề cập ngắn gọn bằng WebSockets thông qua máy chủ Node của chúng tôi. Bây giờ bạn có một miếng vẽ độc lập cho máy tính bảng, chúng tôi sẽ xem xét làm cho nó có sẵn cho điện thoại của bạn. Tuy nhiên, điện thoại có thể quá nhỏ để hiển thị cả màn hình và điều khiển. Do đó, chúng tôi đang sử dụng ổ cắm để giao tiếp giữa màn hình điện thoại và máy tính.

15. Phát hiện kích thước thiết bị

Trong tệp HTML chính, thay thế main.js. với thêm.js. . Sau này chứa tất cả những gì chúng tôi đã làm cho đến nay, với các sửa đổi để xử lý các thiết bị và ổ cắm, chúng tôi sẽ kiểm tra trong các bước sau. Có một cái nhìn về DetectDevice () - Phương pháp này bây giờ được gọi là tải thay vì trong đó() và sẽ quyết định 'chế độ' nào để xử lý cho ứng dụng.

Dưới đây là trường hợp cụ thể của điện thoại được phát hiện:

 if (window.innerwidth & lt; 768) {
  Ổ cắm = io.connect ();
  tài liệu.QuerySelector ('# phác thảo'). Xóa ();
  var dials = document.queryselectorall ('. quay số, .shadow');
  [] .foreach.call (quay số, chức năng (mục) {
  item. classlist.add ('lớn');
  });
  iscontrols = true;
  framemarginvertical = 62;
  Ổ cắm.Emit ('Sẵn sàng', {'Ready': 'Controls'});
} 

16. Từ điện thoại đến máy tính

Khắp thêm.js. Bạn sẽ nhận thấy các bit của mã như Ổ cắm.emit () hoặc là socket.on () . Đây là những người phát và người nghe cho các trường hợp điều khiển (điện thoại) và màn hình (máy tính) của chúng tôi. Mỗi sự kiện phát ra cần phải đi qua máy chủ để được phân phối lại cho tất cả các ổ cắm được kết nối. Trong máy chủ \ index.js. Thêm một vài người nghe nữa trong hàm 'kết nối' và khởi động lại máy chủ nút.

 socket.on ('rút', chức năng (dữ liệu) {
  io.sockets.emit ('rút', dữ liệu);
});
Ổ cắm.on ('xóa', chức năng (dữ liệu) {
  io.sockets.emit ('xóa', dữ liệu);
});
Ổ cắm.on ('điều chỉnh khung', chức năng (dữ liệu) {
  màn hìnhWidth = data.screenwidth;
  ScreenHeight = data.screenHeight;
  io.sockets.emit ('điều chỉnh khung', dữ liệu);
}); 

17. Sửa định hướng điện thoại

Truy cập localhost trên máy tính của bạn, trong khi truy cập từ xa với điện thoại của bạn (như bạn đã làm trước đó từ máy tính bảng của bạn). Bây giờ bạn sẽ thấy một dòng được vẽ trên màn hình của bạn trong khi xoay mặt số trên điện thoại của bạn. Tuy nhiên, bạn sẽ nhận thấy rằng các mặt số không phù hợp với điện thoại ở chế độ dọc.

Chúng ta có thể khắc phục điều này với một số CSS:

 Màn hình @Media và (Định hướng: Chân dung) {
  .dial.big # Disvertical, .shadow.big # dialshadowvertical {
  Phải: Calc (50% - 75px);
  Đáy: 20px;
  TOP: AUTO;
  Không thể
  .dial.big # dialhorizontal, .shadow.big # dialshadowhorizontal {
  Trái: Calc (50% - 75px);
  Top: 20px;
  Không thể
} 

18. Làm đồ chơi thực tế hơn

Hãy quay lại phiên bản máy tính bảng của chúng tôi. Đáng buồn thay, API rung không khả dụng trên iOS, vì vậy chúng tôi không thể thực hiện phản hồi haptic khi quay số. Tuy nhiên, trong đồ chơi ban đầu, bạn có thể để các dấu vân tay đen tạm thời trên màn hình nếu bạn đẩy nó. Chúng tôi có thể thêm một sự kiện chạm trên thiết bị để sao chép tính năng này.

Đặt những người nghe này trong trong đó() và khám phá các chức năng họ gọi:

 if (type === 'all') {
  Canvas.addeventlistener ('TouchStart', Hàm (e) {
  e.preventdefault ();
  Drawfingerprint (e.layerx, e.layery, đúng);
  });
  canvas.addeventlistener ('touchend', hàm (e) {
  HideFingerPrint (e.layerx, e.layery);
  });
} 

19. Lưu một bản sao của khung vẽ

bên trong Drawfingerprint () Phương pháp, trước khi chúng tôi làm bất cứ điều gì khác, chúng tôi lưu một bản sao của trạng thái hiện tại của khung vẽ vào một phần tử ẩn mà chúng tôi sử dụng để khôi phục bản vẽ của chúng tôi khi xóa bản in. Điều đó chỉ xảy ra trong lần chạm đầu tiên, và không phải trong các cuộc gọi tiếp theo sẽ tăng kích thước của bản in cứ sau 100ms.

 Chức năng Drawfingerprint (XPOS, YPOS, Savecanvas) {
  / * Chức năng một phần, tham khảo thêm.js * /
  if (savecanvas) {
  hiddencanvas = document.createase ('canvas');
  var hiddencontext = hiddencanvas.getContext ('2d');
  hiddencanvas.width = canvas.width;
  hiddencanvas.height = canvas.height;
  hiddencontext.drawimage (Canvas, 0, 0);
  Không thể
} 

20. Chạy ứng dụng ngoại tuyến

Bây giờ bạn có thể làm cho ứng dụng thực sự độc lập bằng cách lưu nó vào máy tính bảng của bạn dưới dạng ứng dụng màn hình chính. Chúng tôi sẽ không thể làm tương tự cho điện thoại, vì nó yêu cầu kết nối với máy chủ. Trong /công cộng , xác định vị trí tệp có tên phác thảo.appcache. và thay thế tất cả các trường hợp 'localhost' bằng địa chỉ IP của bạn.

Bây giờ, Sửa đổi HTML để đọc như sau:

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

21. Lưu ứng dụng

Bây giờ hãy truy cập ứng dụng một lần nữa trên máy tính bảng của bạn và chọn tùy chọn Thêm vào Màn hình chính. Một biểu tượng mới sẽ xuất hiện trên máy tính để bàn của bạn. Mở nó một lần trong khi vẫn được kết nối với localhost của bạn từ xa. Bảng kê khai bộ đệm mà chúng tôi thiết lập trước đây sẽ tải xuống tất cả các tệp cần thiết để sử dụng ngoại tuyến trong nền. Tắt Wi-Fi và mở lại ứng dụng. Voilà!

Bài viết này ban đầu xuất hiện trong Tạp chí thiết kế web Vấn đề 263. Mua nó đây .

Đọc thêm:

• 15 API web bạn chưa bao giờ nghe nói về
• Hướng dẫn dành cho người mới bắt đầu để thiết kế hình ảnh động giao diện
• Hướng dẫn viết CSS tốt hơn