Lập trình phần mềm paint, vẽ trên web với html5 và javascript
Javascript
250
HTML5
27
White

Bùi Văn Nguyện viết ngày 05/05/2018

Lập trình phần mềm vẽ là một trong những đề tài mà hầu hết các bạn đang học IT muốn làm, bởi vì nó rất thú vị. Hiểu đơn giản nó giống phần mềm paint của windows, người dùng có thể chọn màu, chọn độ dày nét bút và vẽ tự do lên đó.

Đườ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.

alt text

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.

Các bạn có thể xem video để hiểu cách làm, video này mình viết tất cả từ đầu trong khoảng 1 tiếng live stream.

Đầu tiên chúng ta tạo một object đại diện cho bảng vẽ với các thuộc tính cơ bản, tạo canvas và append nó vào body.

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:

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ỳ:

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:

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:

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

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ẽ.

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ó.

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 video, mình còn làm thêm phần chọn màu nét vẽ, bạn có thể xem code để tìm hiểu thêm.

Nguồn bài viết
Blog lập trình cuộc sống
http://laptrinhcuocsong.com/series-nghich-ngom-lap-trinh-phan-mem-paint-ve-tren-web-html5-javascript.html

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Bùi Văn Nguyện

8 bài viết.
111 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
33 6
Nguồn: (Link) trên (Link) Là một lập trình viên, chắc hẳn bạn cũng có những ý tưởng phần mềm hay, hữu ích muốn làm. Bạn hăm hở háo hức làm một các...
Bùi Văn Nguyện viết 2 tháng trước
33 6
White
27 7
Dạo gần đây có rất nhiều tranh cãi xung quanh vấn đề bằng cấp đối với lập trình viên, người bảo cần thiết, người bảo không. Khi mình bắt đầu chính ...
Bùi Văn Nguyện viết 3 tháng trước
27 7
White
19 12
Có thể khi đọc xong tiêu đề, bạn sẽ nghĩ cái thằng này thật vớ vẩn, lập trình thì liên quan quái gì đến sáng tạo? Đây là blog lập trình, thì viết v...
Bùi Văn Nguyện viết 2 tháng trước
19 12
Bài viết liên quan
White
45 8
Tăng sức mạnh cho javascript với lodash Lần này mình sẽ giới thiệu 1 thư viện javascript vô cùng bá đạo có tên là "lodash]1]", có thể nói nó là LI...
Huy Hoàng Phạm viết gần 3 năm trước
45 8
White
12 1
Lấy fake path của file trong html input Ngữ cảnh: em cần làm một cái nút tải ảnh lên có preview. GIải pháp đầu: Dùng (Link) đọc file ảnh thành ba...
Hoàng Duy viết hơn 2 năm trước
12 1
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
8 bài viết.
111 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!