Share Sử dụng thư viện Moveable để thiết kế ứng dụng chỉnh sửa hình ảnh đơn giản

[filiallion]

Language

Tiếng Việt

Nếu các bạn đã từng sử dụng ứng dụng Photoshop để điều chỉnh hình dạng của hình ảnh như kéo rộng, thu hẹp, kéo nghiêng, xoay,... thì các bạn có thể dễ dàng hình dung chức năng của thư viện Moveable mà tôi giới thiệu với các bạn ở bài viết này. Chính vì khả năng này của thư viện Moveable mà các bạn có thể tận dụng để tạo một ứng dụng web đơn giản để chỉnh sửa hình ảnh.

Ngoài khả năng hỗ trợ tích hợp vào website như thông thường thì thư viện Moveable còn hỗ trợ gói tích hợp vào các ứng dụng được phát triển bằng Nodejs hay React. Bài viết này thì tôi hướng dẫn các bạn sử dụng trên website thông thường, tuy nhiên các cài đặt của thư viện Moveable đều hoàn toàn giống nhau trên các nền tảng.

Để sử dụng thư viện Moveable, các bạn có thể tải tại địa chỉ https://github.com/daybrush/moveable và tích hợp vào website với dòng mã lệnh HTML như sau:

<script src="path/to/moveable.min.js"></script>

Bây giờ, các bạn tham khảo ví dụ sau để biết cách sử dụng thư viện Moveable:

var moveable = new Moveable(
    document.body,
    {
        target: document.querySelector('.target'),
        container: document.body,
        draggable: true,
        resizable: true,
        scalable: true,
        rotatable: true,
        warpable: true,
        pinchable: true,
        origin: true,
        keepRatio: true,
        edge: false,
        throttleDrag: 0,
        throttleResize: 0,
        throttleScale: 0,
        throttleRotate: 0
    }
);

Các bạn có thể tìm hiểu tất cả về thư viện Moveable tại địa chỉ https://daybrush.com/moveable/release/latest/doc.