Как изменить размер веб-контекста холста в JavaScript? - PullRequest
Новая
       11

Как изменить размер веб-контекста холста в JavaScript?

0 голосов
/ 18 сентября 2018

Прежде всего, поблагодарите за чтение моего вопроса и попробуйте помочь мне и извиниться за мой английский.

Я пытаюсь изменить размер холста с помощью dpi, который вы передаете в качестве параметра. Я работаю с векторами типов слоев, поэтому canvas.getContext("2d") return null, поэтому я использую canvas.getContext('webgl'). 

setDPI(canvas, dpi) {
    var scaleFactor = dpi / 96;
    canvas.width = Math.ceil(canvas.width * scaleFactor);
    canvas.height = Math.ceil(canvas.height * scaleFactor);
    var ctx = canvas.getContext("2d");
    ctx.scale(scaleFactor, scaleFactor);
};

Итак, этот код вылетает, потому что canvas.getContext ("2d") возвращает ноль;

Как изменить размер холста с помощью webgl ??

Вот мой код: 

handleFinish = (e) => {
    e.preventDefault();
    let canvas = this.props.map.getCanvas();
    let gl = canvas.getContext('webgl');
    this.resize(gl);
    console.log('canvas1: ', canvas);
    var dims = {
        'A0': [1189, 841],
        'A1': [841, 594],
        'A2': [594, 420],
        'A3': [420, 297],
        'A4': [297, 210],
        'A5': [210, 148]
    };

    var dim = dims[this.state.paper];
    var pageWidth, pageHeight;
    if (this.state.orientation === 'portrait') {
        pageWidth = dim[1];
        pageHeight = dim[0];
    } else {
        pageWidth = dim[0];
        pageHeight = dim[1];
    }
    var ratio = canvas.width/canvas.height >= pageWidth/pageHeight ? pageWidth/canvas.width : pageHeight/canvas.height;

    if (this.state.outputFormat === 'PNG') {
        canvas.toBlob( (blob) => {
            FileSaver.saveAs(blob, 'map.png');
        });
    }
    else {
        var imgData = canvas.toDataURL('image/png', 1.0);
        var pdf = new jsPDF(this.state.orientation, 'mm', this.state.format); // mm or undefined
        pdf.addImage(imgData, 'PNG', 0, 0, canvas.width * ratio, canvas.height * ratio);
        pdf.save(`map-${this.state.paper}-${this.state.orientation}.pdf`);
    }
};


setDPI(canvas, dpi) {
    var gl = canvas.getContext('webgl') || canvas.getContext("experimental-webgl", {preserveDrawingBuffer: true});
    var scaleFactor = dpi / 96;
    var displayWidth  = Math.floor(gl.canvas.clientWidth * scaleFactor);
    var displayHeight = Math.floor(gl.canvas.clientHeight * scaleFactor);

    if (gl.canvas.width  !== displayWidth || gl.canvas.height !== displayHeight) {
        gl.canvas.width  = displayWidth;
        gl.canvas.height = displayHeight;
        // added but doesnt change
        gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
    }
};

Проблема в моем коде заключается в том, что если я умножить на и height для scaleFactor, вернем черное изображение, и если я выберу масштаб, scaleFactor покажет мне изображение, но не изменит размер и не применяет dpi.

...