2

我正在创建一个允许用户使用 HTML5 和 canvas 元素创建场景的站点。

我打算用KinecticJS这个，它看起来很棒。但我有一个问题，我真的很挣扎。

由于我希望能够为用户提供更高质量的打印场景版本，因此我不能只给他们 800x600 像素的画布数据，因为打印时它会变得非常模糊。

我看到一些论坛建议简单地“扩大”你的canvas输出然后保存输出，但我担心这样做的性能成本。虽然这可能是我唯一的希望。

由于 KinecticJS 使用图形层次结构来渲染场景，我认为可以使用 KineticJS 创建场景，然后重新渲染（而不是缩放）相同的场景，只是这次放大位置等......场景中的物体。

以前有没有人做过这样的事情？到目前为止，我仍处于研究阶段。

请注意，显然我知道 SVG，但我需要更大的浏览器支持，并且 IE 在 IE9 之前使用 VML，我严重怀疑我能否将 SVG/VML 场景转换为 PNG 并保持浏览器支持。

4

2 回答 2

5

您可以为单个“捕获帧”放大画布。

您有一个绘图功能或一个渲染功能。给它一个论点，如果该论点是正确的，请参考更大的背景。

var canvas, context; //you already have these
var newCanvas, newContext; //I'm making these
var scaleFactor = 2; //How much we scale?
var ctx; //Identify's which context to draw to....

function render(screenShot){
    ctx = context;
    if(screenShot){
        if(!newCanvas){
            newCanvas = document.createCanvas();
            newContext = newCanvas.getContext('2d');
        }
        newCanvas.width = canvas.width * scaleFactor;
        newCanvas.height = canvas.height * scaleFactor;

        ctx = newContext;
        newContext.scale(scaleFactor, scaleFactor); //Now all your previous drawing will autoscale
    }

    /*   all your old draw code goes here, 
    change all your context calls to ctx */

    if(screenShot){
        YourNewHighResSuperCoolSnapShotData = newCanvas.toDataURL("image/png");
    }
}

你可能想看看 toDataURL 是如何工作的，以及它会给你什么。

这不会造成任何损失，因为您只需要在需要高质量的时候调用 render(true)

于 2013-04-22T02:08:26.207 回答
1

我对此有另一个答案：

function makeBig(firstStage) {
    newStage.setScale(2);
    newStage.add(firstStage.getChildren()[0].clone());
}

这对我有用，一旦你知道怎么做就很容易了:)

于 2013-05-23T05:23:25.330 回答