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

最新推荐文章于 2024-06-17 14:58:27 发布

一叶一语

最新推荐文章于 2024-06-17 14:58:27 发布

阅读量4k

点赞数 1

分类专栏： canvas 文章标签： fabric.js

本文链接：https://blog.csdn.net/qyx189573/article/details/103166039

版权

canvas 专栏收录该内容

1 篇文章 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>
        <!-- 这里的案例我是根据fabric 官网改动的 可以打印状态 -->
        <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();
       }
        }