Javascript Vue.JS画布绘图与iPad的兼容性

我目前正在制作一个用户可以使用Vue.js绘制的画布，非常类似于下面的示例：

我试着在网上寻找关于兼容性的详细解释，但找不到任何东西，我的问题是绘图方面在iPad上根本不起作用，光标拾取位置，但手势无法开始绘图

任何帮助都会很好。提前谢谢

以下是JS：

var app = new Vue({


el: '#draw',
  data: {
    history: [],
        color: '#13c5f7',
        popups: {
            showColor: false,
            showSize: false,
            showWelcome: true,
            showSave: false,
            showOptions: false
        },
        options: {
            restrictY: false,
            restrictX: false
        },
        save: {
            name: '',
            saveItems: []
        },
        size: 12,
        colors: [
            '#d4f713',
            '#13f7ab',
            '#13f3f7',
            '#13c5f7',
            '#138cf7',
            '#1353f7',
            '#2d13f7',
            '#7513f7',
            '#a713f7',
            '#d413f7',
            '#f713e0',
            '#f71397',
            '#f7135b',
            '#f71313',
            '#f76213',
            '#f79413',
            '#f7e013'],
        sizes: [6, 12, 24, 48],
        weights: [ 2, 4, 6 ]
  },
    methods: {
        removeHistoryItem: ()=>{
            app.history.splice(app.history.length-2, 1);
            draw.redraw();
        },
        removeAllHistory: ()=>{
            app.history = [];
            draw.redraw();
        },
        simplify: ()=>{
            var simpleHistory = [];
            app.history.forEach((item, i)=>{
                if(i % 6 !== 1 || item.isDummy){
                    simpleHistory.push(item);
                }
            });
            app.history = simpleHistory;
            draw.redraw();
        },
        jumble: ()=>{
            var simpleHistory = [];
            app.history.forEach((item, i)=>{
                item.r += Math.sin(i * 20) * 5;
            });
            app.history = app.shuffle(app.history);
            draw.redraw();
        },
        shuffle: (a)=>{
            var b = [];

            a.forEach((item, i)=>{
                if(!item.isDummy){
                    var l = b.length;
                    var r = Math.floor(l * Math.random());
                    b.splice(r, 0, item);
                }
            });

            for(var i = 0; i < b.length; i++){
                if(i % 20 === 1){
                    b.push(draw.getDummyItem());    
                }
            }

            return b;
        },
        saveItem: ()=>{
            if(app.save.name.length > 2){
                var historyItem = {
                    history: app.history.slice(),
                    name: app.save.name
                };

                app.save.saveItems.push(historyItem);
                app.save.name = "";
            }
        },
        loadSave: (item)=>{
            app.history = item.history.slice();
            draw.redraw();
        }
    }
});

class Draw {
    constructor(){
        this.c = document.getElementById('canvas');
        this.ctx = this.c.getContext('2d');

        this.mouseDown = false;
        this.mouseX = 0;
        this.mouseY = 0;

        this.tempHistory = [];

        this.setSize();

        this.listen();

        this.redraw();
    }

    listen(){
        this.c.addEventListener('mousedown', (e)=>{
            this.mouseDown = true;
            this.mouseX = e.offsetX;
            this.mouseY = e.offsetY;
            this.setDummyPoint();
        });

        this.c.addEventListener('mouseup', ()=>{
            if(this.mouseDown){
                this.setDummyPoint();
            }
            this.mouseDown = false;
        });

        this.c.addEventListener('mouseleave', ()=>{
            if(this.mouseDown){
                this.setDummyPoint();
            }
            this.mouseDown = false;
        });

        this.c.addEventListener('mousemove', (e)=>{
            this.moveMouse(e);

            if(this.mouseDown){
                this.mouseX = this.mouseX;
                this.mouseY = this.mouseY;

                if(!app.options.restrictX){
                    this.mouseX = e.offsetX;
                }

                if(!app.options.restrictY){
                    this.mouseY = e.offsetY;
                }

                var item = {
                    isDummy: false,
                    x: this.mouseX,
                    y: this.mouseY,
                    c: app.color,
                    r: app.size
                };

                app.history.push(item);
                this.draw(item, app.history.length);
            }
        });

        window.addEventListener('resize', ()=>{
            this.setSize();
            this.redraw();
        });
    }

    setSize(){
        this.c.width = window.innerWidth;
        this.c.height = window.innerHeight - 60;
    }

    moveMouse(e){
        let x = e.offsetX;
        let y = e.offsetY;

        var cursor = document.getElementById('cursor');

        cursor.style.transform = `translate(${x - 10}px, ${y - 10}px)`;
    }

    getDummyItem(){
        var lastPoint = app.history[app.history.length-1];

        return {
            isDummy: true,
            x: lastPoint.x,
            y: lastPoint.y,
            c: null,
            r: null
        };
    }

    setDummyPoint(){
        var item = this.getDummyItem();
        app.history.push(item);
        this.draw(item, app.history.length);
    }

    redraw(){
        this.ctx.clearRect(0, 0, this.c.width, this.c.height);
        this.drawBgDots();

        if(!app.history.length){
            return true;
        }

        app.history.forEach((item, i)=>{
            this.draw(item, i);
        });
    }

    drawBgDots(){
        var gridSize = 50;
        this.ctx.fillStyle = 'rgba(0, 0, 0, .2)';

        for(var i = 0; i*gridSize < this.c.width; i++){
            for(var j = 0; j*gridSize < this.c.height; j++){
                if(i > 0 && j > 0){
                    this.ctx.beginPath();
                    this.ctx.rect(i * gridSize, j * gridSize, 2, 2);
                    this.ctx.fill();
                    this.ctx.closePath();
                }
            }
        }
    }

    draw(item, i){
        this.ctx.lineCap = 'round';
        this.ctx.lineJoin="round";

        var prevItem = app.history[i-2];

        if(i < 2){
            return false;
        }

        if(!item.isDummy && !app.history[i-1].isDummy && !prevItem.isDummy){
            this.ctx.strokeStyle = item.c;
            this.ctx.lineWidth = item.r;

            this.ctx.beginPath();
            this.ctx.moveTo(prevItem.x, prevItem.y);
            this.ctx.lineTo(item.x, item.y);
            this.ctx.stroke();
            this.ctx.closePath();
        } else if (!item.isDummy) {         
            this.ctx.strokeStyle = item.c;
            this.ctx.lineWidth = item.r;

            this.ctx.beginPath();
            this.ctx.moveTo(item.x, item.y);
            this.ctx.lineTo(item.x, item.y);
            this.ctx.stroke();
            this.ctx.closePath();
        }
    }
}

var draw = new Draw();

var-app=新的Vue({
el:'画'，
数据：{
历史：[]，
颜色：“#13c5f7”，
弹出窗口：{
showColor:false，
展示规模：假，
欢迎光临，
showSave:false，
showOptions:false
},
选项：{
限制：错误，
限制X：错误
},
保存：{
名称：“”，
保存项：[]
},
尺码：12，
颜色：[
"d4f713",，
#13f7ab"，
"13f3f7",，
"13c5f7",，
"138cf7",，
“#1353f7”，
“#2d13f7”，
"7513f7",，
"a713f7",，
"d413f7",，
"f713e0",，
"f71397",，
"f7135b",，
"f71313",，
"f76213",，
"f79413",，
“#f7e013”]，
尺码：[6,12,24,48]，
权重：[2,4,6]
},
方法：{
removeHistoryItem:（）=>{
应用历史记录拼接（应用历史记录长度-2,1）；
draw.redraw（）；
},
删除所有历史记录：（）=>{
app.history=[]；
draw.redraw（）；
},
简化：（）=>{
var simpleHistory=[]；
app.history.forEach（（项目，i）=>{
如果（i%6！==1 | | item.isDummy）{
simpleHistory.push（项目）；
}
});
app.history=simpleHistory；
draw.redraw（）；
},
混杂：（）=>{
var simpleHistory=[]；
app.history.forEach（（项目，i）=>{
项目r+=数学sin（i*20）*5；
});
app.history=app.shuffle（app.history）；
draw.redraw（）；
},
洗牌：（a）=>{
var b=[]；
a、 forEach（（项目，i）=>{
如果（！item.isDummy）{
var l=b.长度；
var r=Math.floor（l*Math.random（））；
b、 拼接（r，0，项目）；
}
});
对于（变量i=0；i{
如果（app.save.name.length>2）{
变量历史项目={
历史记录：app.history.slice（），
名称：app.save.name
};
app.save.saveItems.push（historyItem）；
app.save.name=“”；
}
},
loadSave：（项目）=>{
app.history=item.history.slice（）；
draw.redraw（）；
}
}
});
班级抽签{
构造函数（）{
this.c=document.getElementById（'canvas'）；
this.ctx=this.c.getContext（'2d'）；
this.mouseDown=false；
this.mouseX=0；
this.mouseY=0；
this.tempHistory=[]；
这个.setSize（）；
这个；
这个；
}
听{
此.c.addEventListener（'mousedown'，（e）=>{
this.mouseDown=true；
this.mouseX=e.offsetX；
this.mouseY=e.offsetY；
this.setDummyPoint（）；
});
this.c.addEventListener（'mouseup'，（）=>{
if（this.mouseDown）{
this.setDummyPoint（）；
}
this.mouseDown=false；
});
this.c.addEventListener（'mouseleave'，（）=>{
if（this.mouseDown）{
this.setDummyPoint（）；
}
this.mouseDown=false；
});
this.c.addEventListener（'mousemove'，（e）=>{
这个。移动鼠标（e）；
if（this.mouseDown）{
this.mouseX=this.mouseX；
this.mouseY=this.mouseY；
如果（！app.options.restrictX）{
this.mouseX=e.offsetX；
}
如果（！应用程序选项限制）{
this.mouseY=e.offsetY；
}
变量项={
伊斯杜米：错，
x:这个，mouseX，
y:这个，老鼠，
c:应用程序颜色，
r:应用程序大小
};
应用程序历史记录推送（项目）；
此.draw（项目、应用程序历史记录、长度）；
}
});
window.addEventListener（'resize'，（）=>{
这个.setSize（）；
这个；
});
}
设置大小（）{
this.c.width=window.innerWidth；
this.c.height=window.innerHeight-60；
}
移动鼠标（e）{
设x=e.offsetX；
设y=e.offsetY；
var cursor=document.getElementById（'cursor'）；
cursor.style.transform=`translate（${x-10}px，${y-10}px）`；
}
getDummyItem（）{
var lastPoint=app.history[app.history.length-1]；
返回{
是的，
x:lastPoint.x，
y:最后一点，y，
c:空，
r:null
};
}
setDummyPoint（）{
var item=this.getDummyItem（）；
应用程序历史记录推送（项目）；
此.draw（项目、应用程序历史记录、长度）；
}
重画{
this.ctx.clearRect（0，0，this.c.width，this.c.height）；
这个.drawBgDots（）；
如果（！app.history.length）{
返回true；
}
app.history.forEach（（项目，i）=>{
本图纸（第i项）；
});
}
drawBgDots（）{
var-gridSize=50；
this.ctx.fillStyle='rgba（0,0,0,2）'；