[Series Nghịch Ngợm] Lập trình phần mềm Paint với HTML và JAVASCRIPT

Bạn có thấy series này thú vị không?

  • Hay. Nên tiếp tục

    Bình chọn: 2 100.0%
  • Nhàm vlll. Nên xoá

    Bình chọn: 0 0.0%

  • Số thành viên bình chọn
    2
Tham gia
2/1/18
Bài viết
8
#1

Lập trình phần mềm vẽ luôn là một đề tài được đa số các bạn IT muốn làm, bởi vì nó khá là thú vị. Hiểu đơn giản là nó giống như phần mềm paint trên Windows, người dùng có thể chọn kích thước, độ dày của bút, chọn màu sắc của bút và có thể vẽ tự do lên đấy.


Ok trong bài viết đầu tiên về Series nghịch ngợm của mình, mình sẽ hướng dẫn làm một trang web cho phép chọn màu sắc của bút và vẽ tự do lên đấy bằng HTML và JAVASCRIPT thuần :))))


BVonwXM.png


Để có thể hiểu rõ hơn thì các bạn nên có kiến thức nền về JS và Canvas. Mình sẽ cố gắng diễn giải cho các bạn dễ hiểu nhất. Toàn bộ source code mình sẽ để ở dưới bài viết nhé. Bạn có thể tải về và xem. Lưu ý là không nên "copy & paste" mà cố gắng đọc hiểu nhé. Ok chúng ta bắt đầu nhé

Tìm hiểu về cách thức hoạt động
8afHgxQ.png

Đường nét ngoằn ngoèo phức tạp của người dùng khi vẽ tự do là rất khó để biểu diễn bằng công thức toán học, đa phần là các bố vẽ linh tinh nhăng cuội. Để giải quyết vấn đề này, chúng ta xem đường nét đó là tập hợp của vô số đường thẳng vô cùng ngắn, nối tiếp nhau. Theo cách hiểu trên, hành động vẽ tự do bằng chuột có thể miêu tả như sau:
  • Khi người dùng bấm chuột và chưa thả tay (mouse down), chúng ta lưu lại vị trí hiện tại và đặt biến drawing = true để xác định trạng thái bắt đầu vẽ.
  • Người dùng đang giữ chuột, di chuột qua vị trí khác (mouse move), ta vẽ liên tục các đường thẳng từ vị trí cũ đến vị trí mới.
  • Khi người dùng thả tay (mouse up) đặt biến drawing = false để không tiếp tục vẽ nữa.
Ok chúng ta có thể hiểu đại khái là vậy bây giờ chúng ta bắt tay vào code nhé

Bước 1: Cài đặt

Ok đầu tiên khởi tạo 1 project. Bạn có thể download template ở đây. Sau khi tải về và giải nén sẽ được các file như sau:
  • File index.html: Phần mềm sẽ chạy trên file này
  • File draw.js: Nơi chứa code javascript để vẽ
Bước 2: Bắt đầu code

Mở file draw.js lên ta khởi tạo một đối tượng canvas có kích thước 700x500 và append nó vào thẻ body, trong đó ta sẽ thêm cho nó một số thuộc tính cơ bản

JavaScript:
var draw = function(){
    this.canvas   = null;
    this.context   = null;
    this.width    = 700;
    this.height   = 500;
    this.x        = 0;
    this.y        = 0;
    this.drawing   = false;
    this.lineWidth = 3;
    this.color    = "#000000"; // mặc định là màu đen

    var self = this;

    this.init = function(){
        this.canvas       = document.createElement('canvas');
        this.context      = this.canvas.getContext('2d');
        this.canvas.width  = this.width;
        this.canvas.height = this.height;

        document.body.appendChild(this.canvas);
    }
}
Sau đó chúng ta tạo nền cho canvas bằng cách vẽ một hình chữ nhật màu trắng bao phủ toàn bộ canvas:

JavaScript:
this.drawWhiteBackground = function(){
    this.context.fillStyle = "#ffffff";
    this.context.fillRect(0, 0, this.width, this.height);
}
Như đã nói ở trên, đường vẽ tự do là tập hợp của các đường thẳng, do đó chúng ta sẽ viết hàm vẽ đường thẳng từ vị trí (startX, startY) đến vị trí (endX, endY) bất kỳ:

JavaScript:
this.drawLine = function(startX, startY, endX, endY){
    this.context.beginPath();
    this.context.moveTo(startX, startY);
    this.context.lineTo(endX, endY);
    this.context.lineWidth = this.lineWidth;
    this.context.strokeStyle = this.color;
    this.context.stroke();
}
Tiếp tục viết hàm lấy vị trí của con trỏ chuột, hàm này sẽ trả về một object chứa thông tin vị trí x và y hiện tại của con trỏ chuột vào thời điểm sảy ra sự kiện event:


JavaScript:
this.getMousePosition = function(event){
    var rect = this.canvas.getBoundingClientRect();
    return {
        x: event.clientX - rect.left,
        y: event.clientY - rect.top
    }
}
Bắt các sự kiện chuột: mouse down, mouse up và mouse move để thực hiện các hàm xử lý tương ứng:

JavaScript:
this.canvas.addEventListener('mousedown', function(event){
    self.proccessMouseDown(event);
});
this.canvas.addEventListener('mouseup', function(event){
    self.proccessMouseUp(event);
});
this.canvas.addEventListener('mousemove', function(event){
    self.proccessMouseMove(event);
});
Với sự kiện mouse down, chúng ta lưu vị trí hiện tại và đặt biến drawing = true

JavaScript:
this.processMouseDown = function(event){
    var position = this.getMousePosition(event);
    this.x = position.x;
    this.y = position.y;
    this.drawing = true; // bấm chuột xuống thì bắt đầu vẽ
}
Ngược lại với mouse down, khi người dùng mouse up, chúng ta đặt biến drawing = false để xác định người dùng đã thôi vẽ.

JavaScript:
this.proccessMouseUp = function(event){
    this.drawing = false;
}
Khi người dùng di chuyển chuột (mouse move) nếu drawing == true, tức là chưa nhả chuột ra, thì chúng ta sẽ vẽ liên tiếp các đường thẳng từ vị trí cũ đến vị trí mới, và cập nhật vị trí mới cho nó.

JavaScript:
this.proccessMouseMove = function(event){
    if (this.drawing){
        var newPos = this.getMousePosition(event);
        this.drawLine(this.x, this.y, newPos.x, newPos.y);
        this.x = newPos.x;
        this.y = newPos.y;
    }
}
Đến đây, bạn đã tạo được hiệu ứng vẽ tự do trên nền web, trong project, mình còn làm thêm phần chọn màu nét vẽ, bạn có thể download code về xem để tìm hiểu thêm nhé. Chúc các bạn thành công!

DOWNLOAD SOURCE .RAR2KB
 

Bình luận bằng Facebook

Thành viên trực tuyến

Không có thành viên trực tuyến.

Thống kê diễn đàn

Chủ đề
1,325
Bài viết
2,682
Thành viên
5,209
Thành viên mới nhất
Lý Hoàng Long
Top Bottom