能在手机上绘制图形的canvas集合fabricjs并且可以使用双指缩放图片

╰半夏微凉° 2023-06-15 06:42 8阅读 0赞

在html中使用 在网上查找各种canvas js集合时，我发现关于fabric.js 大多数是在pc端的，但是我在使用fabric.js 时发现它其实也可以在移动端使用的，在移动端不仅仅可以使用图片的各种操作，其实也可以实现，想画板的各种功能.

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>fabric-with-gestures</title>
        <script src="./fabric-with-gestures/dist/fabric.min.js"></script>
    </head>
    <body>
        <div>
            
            <p id="info" style="height:60px;width: 100%;overflow-y: scroll;"></p>
            <canvas id="c"></canvas>
        </div>
        <script>
        var canvas = new fabric.Canvas('c');
            canvas.setWidth(350)// 设置canvas的宽
            canvas.setHeight(200)// 设置canvas的高
            fabric.Image.fromURL('./2.png', function(img) { 
            img.scale(0.5).set({ 
                left: 150,
                top: 150,
                angle: -15
            });
            canvas.add(img).setActiveObject(img);//可以在移动端用双指缩放图片
            });
            var info = document.getElementById('info');
            /* 要想触发 必须是fabric-with-gestures touch:gesture touch:drag touch:shake touch:longpress */
            canvas.on({ 
            'touch:gesture': function() { 
                var text = document.createTextNode(' Gesture ');
                info.insertBefore(text, info.firstChild);
            },
            'touch:drag': function() { 
                var text = document.createTextNode(' Dragging ');
                info.insertBefore(text, info.firstChild);
                console.log('drag')
            },
            'touch:orientation': function() { 
                var text = document.createTextNode(' Orientation ');
                info.insertBefore(text, info.firstChild);
                console.log('orientation')
            },
            'touch:shake': function() { 
                var text = document.createTextNode(' Shaking ');
                info.insertBefore(text, info.firstChild);
                console.log('shake')
            },
            /* 长按 */
            'touch:longpress': function() { 
                var text = document.createTextNode(' Longpress ');
                info.insertBefore(text, info.firstChild);
                console.log('longpress')
    
            }
            });
        </script>
    </body>
    </html>

## 在vue 使用 fabric .js ##

import {  fabric } from 'fabric-with-gestures' 
      var canvas;
       export default { 
             data(){ 
                return { 
                   mouseFrom:{ },
                   mouseTo:{ },
                   moveCount:1,
                   drawmoving:false,
                }
            },
            mounted(){ 
                 // 初始化canvas画布
                 var _this=this;
                canvas=new fabric.Canvas(this.Id,{ 
                    backgroundColor:'#FFF' //canvas 背景
                });
               // canvas.setZoom(2); //设置画板缩放比例
                // canvas.width=800;
                // canvas.height=800;
                  // canvas事件绑定
                canvas.on({ 
                     //双指 操作事件
                    'touch:gesture': function(e) { 
                        // console.log('gesture',e)
                        // e.target.
                    },
                    'touch:drag': function(e) { 
                      // console.log('touch:drag',e);
                        // var data=canvas.toJSON();//canvas 序列化
                        // _this.addCanvaspdf(data);
                    },
                    // 
                    'touch:orientation': function(e) { 
                      console.log('orientation',e)
                    },
                    'touch:shake': function() { 
                       console.log('shake')
                    },
                    // 长按
                    'touch:longpress': function(e) { 
                      console.log('longpress',e);
                    },
                    'mouse:down':(o)=>{ 
                            _this.mouseFrom.x=o.absolutePointer.x;// 拿到当前x 的坐标 在移动端也可以
                           _this.mouseFrom.y=o.absolutePointer.y;// 拿到当前y 的坐标 在移动端也可以
                            _this.drawmoving = true;
                             _this.directState=false;
                            console.log('dx',_this.mouseTo.x);
                            console.log('dy',_this.mouseTo.y);
                            console.log("o",o);
                    },
                    "mouse:up":(o)=>{ 
                          _this.mouseTo.x=o.absolutePointer.x;
                         _this.mouseTo.y =o.absolutePointer.y;
                        // _this.directState=false;
                        console.log('x',_this.mouseTo.x);
                        console.log('y',_this.mouseTo.y);
                    },
                    "mouse:move":(m)=>{ 
                        if(_this.moveCount % 2 && !_this.drawmoving){ 
                            return;
                        }
                        _this.moveCount++;
                        _this.mouseTo.x=m.absolutePointer.x;
                        _this.mouseTo.y=m.absolutePointer.y;
                      },
                        'object:moving': (e)=> { 
                             // e.target.opacity = 0.8; 设置移动是对象的透明状态
                        },
                     'object:added': (e)=>{ 
                       let object = e.target;
                        if(!_this.controlFlag) { 
                        _this.redo = []
                        }
                        _this.controlFlag = false
                        console.log("added");
                    },
                    'object:modified':(e)=> { 
                        // e.target.opacity = 1;
                        let object = e.target;
                    },
                   
                })
           },
           methods(){ 
            // 添加图片在canvas上
             testimg(){ 
                   fabric.Image.fromURL(require("../assets/img/2.png"), (img) => { 
                    img.set({ 
                        left:150,//图片在canvas上坐标
                        top:150,//图片在canvas上坐标
                        originX:"center",//坐标x 作用设置图片的x轴的坐标
                        originY:"center",//坐标y 作用设置图片的y轴的坐标
                        // hasControls: false, // 是否开启图层的控件
                        //borderColor: 'orange', // 图层控件边框的颜色
                        angle:0 //图片旋转角度
                    });
                    // 添加对象后, 如下图
                    canvas.add(img);
                    // canvas.item(0).lockMovementY= true;//锁定Y轴
                    // canvas.item(0).lockMovementX= true;//锁定X轴
                     canvas.item(0).lockRotation = true;//锁定旋转
                    });
                },
           
           },
           created(){ 
             this.testimg();
           }
            }

关于fabric .js 使用 [可以查看][Link 1]这个地址。里面有各种使用说明。这里我就只给一个案例，其他需要你自己去发挥。

[Link 1]: https://blog.csdn.net/yanzisu_congcong/article/details/77840526