Question

我按照文档中的示例创建了一个响应式画布：https://konvajs.github.io/docs/sandbox/Responsive_Canvas.html。

用户可以将画布保存到他们的库中;我创建了一个JSON文本文件和画布的PNG。 PNG用于在用户库中显示已保存的画布，而Json用于在从库中选择画布时加载画布。

我的问题是根据当前的响应大小保存画布，但我需要将保存的版本作为width x height的默认500 x 667。

以下是我缩放画布的代码：

function fitStageIntoParentContainer() {
    var stageParent = document.querySelector('#stage-parent');
    // now we need to fit stage into parent
    var stageParentWidth = stageParent.offsetWidth;
    // to do this we need to scale the stage
    var scale = stageParentWidth / width;
    if ((width * scale) < width) {
        stage.width(width * scale);
        stage.height(height * scale);
        stage.scale({ x: scale, y: scale });
        stage.draw();        
    }
}

这是我保存画布的代码：

function saveLabel($title, $continue) {
    var elGrid = stage.find('.gridlayer');
    if (elGrid.length) elGrid.destroy();  

    var $json = stage.toJSON();
    var $dataURL = stage.toDataURL('image/png');
    console.log($json);
    console.log($dataURL);
    saveLabelAjax($json, $dataURL, $title, $continue, label_maker);
}

在尝试使用Json和PNG之前，我尝试更改了舞台的宽度，高度和比例，但我最终得到了一个空白的PNG。

这是我尝试过的代码：

function saveLabel($title, $continue) {
    var elGrid = stage.find('.gridlayer');
    if (elGrid.length) elGrid.destroy();

    var currentWidth = stage.width();
    var currentHeight = stage.height();
    var currentXScale = stage.scaleX();
    var currentYScale = stage.scaleY();
    stage.setWidth(width);
    stage.setHeight(height);
    stage.scale({ x: 0, y: 0 });
    stage.draw();
    var $json = stage.toJSON();
    var $dataURL = stage.toDataURL('image/png');
    console.log($json);
    console.log($dataURL);
    stage.setWidth(currentWidth);
    stage.setHeight(currentHeight);
    stage.scale({ x: currentXScale, y: currentYScale });
    stage.draw();

    //console.log(json);
    saveLabelAjax($json, $dataURL, $title, $continue, label_maker);
}

任何帮助都将不胜感激。

序列化已针对小型视图屏幕缩放的画布

0 个答案: