Question

我目前正在制作Canvas，供用户使用Vue.js进行绘制，这与此处的示例非常相似：https://codepen.io/Lewitje/full/MVommB。

我尝试在网上寻找兼容性的详细说明，但找不到任何东西，我的问题是，绘图方面完全无法在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();

Answer 1

我不确定这个问题与Vue JS本身有关，甚至与代码中的错误有关。

您的绘图类使用某些事件处理程序，例如mousemove和mouseleave。触摸设备有时可能需要使用特定于触摸的事件。

例如el.addEventListener("touchmove", handleMove, false)

您可能还需要重构draw()类以容纳这些事件。

请参阅此处： https://developer.mozilla.org/en-US/docs/Web/API/Touch_events

Vue.JS Canvas绘图iPad兼容性

1 个答案: