11/08/2018, 20:37

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

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

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.awidth     = 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.awidth  = this.awidth;
        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.awidth, 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ài liên quan

Phần mềm độc hại trên Play Store đã có 500,000 lượt tải về

Google đã xử lý nhanh chóng sau khi phát hiện hơn 12 phần mềm độc hại trên Play Store. Công ty này đã gỡ bỏ 13 phần mềm độc hại trên Play Store chạy trên nền tảng Android, trong đó có những ứng dụng có mặt trong top nổi bật của Play Store. Tuy nhiên, việc gỡ bỏ các phần mềm độc hại trên ...

Vũ Văn Thanh viết 7 ngày trước

CẢNH BÁO: Phần mềm độc hại trên Play Store đã có 500,000 lượt tải về

Google đã xử lý nhanh chóng sau khi phát hiện hơn 12 phần mềm độc hại trên Play Store và đã gỡ bỏ 13 phần mềm độc hại trên Play Store chạy trên nền tảng Android, trong đó có những ứng dụng có mặt trong top nổi bật của Play Store. Tuy nhiên, việc gỡ bỏ các phần mềm độc hại trên Play ...

Bùi Văn Nam viết 1 tuần trước

Phần mềm lừa đảo trên Android cải trang thành ứng dụng “Kaspersky Mobile Security”

Một phần mềm độc hại với tên gọi SandroRAT, đang được phát tán nhằm vào người sử dụng Android bằng cách gửi hàng loạt thư điện tử với nội dung cảnh báo người dùng về các phần mềm độc hại trên điện thoại và đưa ra một ứng dụng diệt virus để loại bỏ chúng. Phần mềm diệt virus này bên ngoài trong rất ...

Hoàng Hải Đăng viết 18:09 ngày 17/09/2018

Cách phát hiện và gỡ phần mềm nghe lén trên smartphone

Sự việc hơn 14.000 điện thoại tại Việt Nam bị công ty công nghệ Việt Hồng cài phần mềm nghe lén vừa bị phát hiện đã gây xôn xao cho dư luận. Vậy làm thế nào để phát hiện điện thoại của mình có bị cài phần mềm nghe lén hay không và cách gỡ chúng ra khỏi điện thoại như thế nào? Phần mềm nghe lén ...

Vũ Văn Thanh viết 17:48 ngày 17/09/2018

Tuyển dụng lập trình viên: Cạnh tranh về lương là con đường nhanh nhất dẫn đến bế tắc!

Với hơn 10 năm kinh nghiệm trong lĩnh vực nhân sự, tuyển dụng tại các công ty lớn và giờ đây anh Trần Vũ Thanh chọn Sen Đỏ (Sàn Thương mại điện tử Sendo.vn) là điểm dừng chân của mình. Gần đây anh Thanh có buổi trò chuyện với TopDev về thị trường tuyển dụng IT, anh Thanh đã có ...

Bùi Văn Nam viết 15:58 ngày 31/08/2018
0