Question

我一直在尝试使用新的Ecma6类系统在画布上画画，但经过大量的研究，它只是不想工作。我将上下文作为draw函数的参数传递，即使我记录上下文它也不会说它是空的或未定义的。你们中的任何一个人能帮助我吗？

这是我的代码：

class Canvas {
    constructor() {
        this.canvas = document.getElementById('canvas');
        this.context = this.canvas.getContext('2d');
        this.width = this.canvas.width;
        this.height = this.canvas.height;
        this.components = [];
    }

    draw() {
        this.context.clearRect(0, 0, this.width, this.height);
        this.context.globalCompositeOperation = 'hard-light';

        this.components.map(e => e.draw(this.context));

        window.requestAnimationFrame(this.draw.bind(this));
    }

    add(e) {
        this.components.push(e);

        this.components.sort(function (a, b) {
            return a.layer - b.layer;
        });
    }

    listeners() {
        window.addEventListener('resize', () => {
            this.width = this.canvas.width;
            this.height = this.canvas.height;
        }, false);
    }

    init() {
        this.listeners();
        this.draw();
    }
}

class CanvasElement {
    constructor(x, y, height, width, layer) {
        this.position = {
            x: x,
            y: y
        }
        this.height = height;
        this.width = width;
        this.layer = layer;
        this.color = "grey";
    }

    draw(context) {
        context.fillStyle = this.color;
        context.fillRect(this.x, this.y, this.width, this.height);
    }
}

class CanvasImage extends CanvasElement {
    constructor(x, y, image, context) {
        super(x, y, image.width, image.height, 0);
        let self = this;
        this.image = new Image();
        this.image.onload = function () {
            self.imageReadyToUse = true;
            self.width = this.width;
            self.height = this.height;
        }
        this.image.src = image;
        this.imageReadyToUse = false;

    }

    draw(context) {
        if (this.imageReadyToUse) {
            context.drawImage(this.image, this.x, this.y);
        }
    }
}

Answer 1

您的错误在于drawImage方法中的位置。您的this.x和this.y值为undefined。

这是一个有效的例子：

＆＃13;

var imageURL = "data:image/gif;base64,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";

class Canvas {
        constructor() {
            this.canvas = document.getElementById('canvas');
            this.context = this.canvas.getContext('2d');
            this.width = this.canvas.width;
            this.height = this.canvas.height;
            this.components = [];
        }
    
        draw() {
            this.context.clearRect(0, 0, this.width, this.height);
            this.context.globalCompositeOperation = 'hard-light';
    
            this.components.map(e => e.draw(this.context));
    
            window.requestAnimationFrame(this.draw.bind(this));
        }
    
        add(e) {
            this.components.push(e);
    
            this.components.sort(function (a, b) {
                return a.layer - b.layer;
            });
        }
    
        listeners() {
            window.addEventListener('resize', () => {
                this.width = this.canvas.width;
                this.height = this.canvas.height;
            }, false);
        }
    
        init() {
            this.listeners();
            this.draw();
        }
    }
    
    class CanvasElement {
        constructor(x, y, height, width, layer) {
            this.position = {
                x: x,
                y: y
            }
            this.height = height;
            this.width = width;
            this.layer = layer;
            this.color = "grey";
        }
    
        draw(context) {
            context.fillStyle = this.color;
            context.fillRect(this.x, this.y, this.width, this.height);
        }
    }
    
    class CanvasImage extends CanvasElement {
        constructor(x, y, size, context) {
            super(x, y, size.width, size.height, 0);
            let self = this;
            this.context = context;
            this.image = new Image();
            this.image.onload = function () {
                self.imageReadyToUse = true;
                self.width = this.width;
                self.height = this.height;
                self.draw();
            }
            this.image.src = imageURL;
            this.imageReadyToUse = false;
        }
    
        draw() {
            if (this.imageReadyToUse) {
                console.log("YOU ARE UNDEFINED:", this.x, this.y);
                this.context.drawImage(this.image, 0, 0, 61, 68);
            }
        }
    }

var canvas = new Canvas();
var canvasImage = new CanvasImage(0, 0, {width:61, height:68}, canvas.context);
canvasImage.draw();

＆＃13;

<canvas style="border:1px solid grey" id="canvas" width="400" height="400"></canvas>
sdsdc

＆＃13;

Answer 2

所以我发现了问题所在。而不是使用this.x和this.y，我不得不使用this.position.x和this.position.y。

感谢您的帮助！

class不在Canvas上绘制

2 个答案: