Tìm hiểu về Fabric js

Hôm nay, mình sẽ giới thiệu với các bạn về Fabric.js - một thư viện Javascript mạnh mẽ giúp bạn làm thỏa sức sáng tạo trên nền HTML5. Vậy bạn có thắc mắc Fabricjs là gì không hay tại sao phải dùng nó trong khi đã có API canvas mà HTML5 đã cung cấp sẵn cho chúng ta rồi... Trong bài viết này mình sẽ giúp bạn trả lời các câu hỏi đó. Hãy cùng chú ý nhé.

1. Fabricjs là gì ?

• Là 1 thư viện javascrip mạnh mẽ và đơn giản hỗ trợ cho HTML5 canvas.
• Cung cấp các object model bị thiếu cho canvas, bộ SVG parser, các layer tương tác ...
• Là open source, giấy phép MIT, với sự cộng tác trong nhiều năm của các lập trình viên khác trên thế giới.

2. Tại sao nên dùng Fabric ?

• Như chúng ta đã biết Canvas cho phép chúng ta tạo ra thỏa sức sáng tạo những chức năng đồ họa tuyệt vời chạy trên nền trình duyệt web. Nhưng sử dụng API của nó, có nghĩa là bạn phải sử dụng ở mức độ thấp những hàm cơ bản mà nó cung cấp.
• Để khắc phục điều này Fabric cung cấp những object model cơ bản nhưng mạnh mẽ dựa trên những phương thức cơ bản. Cho phép chúng ta làm việc trên những đối tượng (Line, Circle, Rectangle) trực tiếp, kiểm soát được trạng thái và việc tạo hình/vẽ hình(rendering) của canvas.
• Hãy xem qua ví dụ về việc vẽ 1 hình chữ nhật dưới đây để thấy sự khác biệt.

Dùng API canvas hỗ trợ

    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = 'red';
    ctx.fillRect(100, 100, 20, 20);

Dùng Fabricjs

    var canvas = new fabric.Canvas('canvas');
    var rect = new fabric.Rect({
        left: 100,
        top: 100,
        fill: 'red',
        awidth: 20,
        height: 20
    });

    canvas.add(rect);

Như vậy qua ví dụ trên bạn có thể thấy việc sử dụng các API canvas mà HTML 5 hỗ trợ là khá phức tạp trong khi nếu sử dụng Fabricjs bạn sẽ thấy đơn giản hơn rất nhiều. Khi sử dụng Fabricjs thì chúng ta chỉ làm việc trên các đối tượng và cũng thay đổi các thuộc tính trong đối tượng đấy 1 các rất dễ dàng và thuận tiện.

3. Các Object mà Fabricjs hỗ trợ

Nếu bạn thường xuyên phải làm việc với các hình học thì Fabric cũng cung cấp những hình cơ bản để bạn có thể lựa chọn phù hợp với nhu cầu của mình: hình tròn, tam giác, ellipse... Tất cả chúng đều nằm trong fabric "namespace" tương ứng như: fabric.Circle, fabric.Triangle, fabric.Ellipse...

7 loại hình cơ bản được cung cấp trong Fabric:

• fabric.Circle
• fabric.Ellipse
• fabric.Line
• fabric.Polygon
• fabric.Polyline
• fabric.Rect
• fabric.Triangle

Dưới đây là 1 vài ví dụ minh họa

    //Vẽ hình tròn
    var circle = new fabric.Circle({
        radius: 20, fill: 'green', left: 100, top: 100
    });

    // Vẽ hình tam giác
    var triangle = new fabric.Triangle({
        awidth: 20, height: 30, fill: 'blue', left: 50, top: 50
    });

    // Thêm đối tượng hình tròn và hình tam giác vào trong canvas
    canvas.add(circle, triangle);

Đơn giản phải không nào? Các đối tượng khác bạn vào trong document của Fabricjs để đọc nha.

4. Thêm ảnh vào trong Fabricjs

Nếu bạn có những bức ảnh tuyệt đẹp mà muốn thêm chúng vào trong canvas thì phải làm sao ? Rất đơn giản thôi, với Fabricjs đã hỗ trợ và cho phép chúng ta có thể thêm ảnh vào trong canvas 1 cách khá dễ dàng thông qua đối tượng fabric.Image.

Chúng ta hãy xem qua ví dụ sau để hiểu rõ hơn.

    <canvas id='canvas'></canvas>
    <img src='my_image.png' id='my-image'>

    var canvas = new fabric.Canvas('canvas');
    var imgElement = document.getElementById('my-img');
    var imgInstance = new fabric.Image(imgElement, {
        left: 100,
        top: 100,
        angle: 30,
        opacity: 0.85
    });
    canvas.add(imgInstance);

Như vậy là chúng ta đã thêm được ảnh vào trong canvas rồi đấy. Giả sử bạn muốn thêm 1 ảnh vào trong canvas từ URL có sẵn trên web rồi thì liệu có được không ? Tất nhiên là có rồi, Fabric đã hỗ trợ chúng ta thông qua việc sử dụng phương thức fabric.Image.fromURL

    fabric.Image.fromURL('my_image.png', function(oImg) {
        canvas.add(oImg);
    });

5. Sử dụng text trong Fabricjs

Đây là 1 trong những tính năng rất hưu ích mà bạn chắc chắn sẽ cần tới đấy. Bạn có thể thêm text vào trong canvas 1 cách dễ dàng và cũng có thể định dạng font chữ, kích thước chữ, màu chữ, in đậm, in nghiêng...

Hãy xem ví dụ dưới đây để hiểu rõ hơn.

    // Thêm text vào trong canvas
    var text = new fabric.Text('hello world', {
        left: 100,
        top: 100
    });
    canvas.add(text);

    // Thiết lập font chữ cho text
    var fontFamilyText = new fabric.Text("I'm in Comic Sans", {
        fontFamily: 'Comic Sans'
    });
    canvas.add(fontFamilyText);

    // Thiết lập cỡ chữ cho text
    var fontSizeText = new fabric.Text("I'm at fontSize 40", {
        fontSize: 40
    });
    canvas.add(fontSizeText);

    // Thiết lập fontWeight cho text
    var normalText = new fabric.Text("I'm a normal text", {
        fontWeight: 'normal'
    });
    canvas.add(normalText);

    var boldText = new fabric.Text("I'm at bold text", {
        fontWeight: 'bold'
    });
    canvas.add(boldText);

Và còn rất nhiều điều thú vị nữa về text bạn có thể tham khảo theo đường dẫn dưới đây để hiểu rõ hơn. text trong Fabricjs

6. Các sự kiện trong Fabricjs

Fabric cung cấp 1 hệ thống các sự kiện phong phú bắt đầu từ các sự kiện ở mức độ thấp như sự kiện của chuột đến các sự kiện ở mức cao hơn là các đối tượng.

Các sự kiện liên quan đến chuột.

• mouse:down — được bắn ra khi sự kiện mousedown xảy ra trên canvas
• mouse:up — được bắn ra khi sự kiện mouseup xảy ra trên canvas
• mouse:move — được bắn ra khi chuột đang di chuyển trên canvas

Để minh họa, mình sẽ minh họa sự kiện mousedown và mouseup. Đầu tiên chúng ta sẽ tạo ra 1 hình tròn và khi nhấn vào hình tròn đó thì sẽ giảm opacity đi một nửa và khi thả chuôt ra thì sẽ khôi phục lại opacity ban đầu. Bắt tay vào code nào.

    var canvas = new fabric.Element('canvas');

    var circle = new fabric.Circle({
        radius: 30,
        fill: '#f55',
        top: 100,
        left: 100
    });

    canvas.add(circle);

    canvas.on({'mouse:down': function(e) {
      if (e.target) {
        e.target.opacity = 0.5;
        canvas.renderAll();
      }
    });

    canvas.on({'mouse:up': function(e) {
      if (e.target) {
        e.target.opacity = 1;
        canvas.renderAll();
      }
    });

Và còn rất nhiều sự kiện trong canvas nữa như sự kiện liên quan đến đối tượng: object:added, object:modified, object:moving, object:over, object:out, ...

Nếu các bạn có hứng thú tìm hiểm thêm về các sự kiện trong fabric thì truy cập vào link đưới đây để tìm hiểu nha.

event trong Fabricjs

Hy vọng bài viết này sẽ giúp bạn hiểu hơn 1 chút về Fabricjs để có thể áp dụng vào các dự án của mình.

Thân!