使用 stage.toDataUrl ，Shape drawFunc 内容将不会被捕获

Question

我最近发现使用 stage.toDataURL 将舞台内容保存为图像。（KineticJS 版本 5.0.1）

带有核心 HTML5 画布对象的自定义 Shape drawFunc 内容在保存图像后不会应用到图像中。

＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃ 图片

请查看附图以获得更好的清晰度。

1)原始画布（舞台）。

https://f.cloud.github.com/assets/1320926/2300781/c8167c30-a107-11e3-9b61-acf94005c252.png

2) 保存阶段内容后的图像 测试1

https://f.cloud.github.com/assets/1320926/2300784/fc5343b6-a107-11e3-8c69-07cccc4d7ac4.png

我们看到垂直字符串“Sample Text”不会被保存或者它是不可见的。

＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃ 代码

1）这是我的形状对象代码，其中线条垂直打印“示例文本”

var sampleText = new Kinetic.Shape({
    drawFunc: function(context) {
        var ctx=this.getContext()._context;
        ctx.beginPath();

        var maxWidth = 2;
        var lineHeight = 25;
        var x = 415;
        var y = 700;
        var text = 'Sample Text';
        ctx.font = '15pt Calibri';
        ctx.fillStyle = 'green';
        //Function for vetical text display
        wrapText(ctx, text, x, y, maxWidth, lineHeight);
        ctx.closePath();
        ctx.fill();
        ctx.restore();

   },
});

//如果需要，可以使用wrapText函数

function wrapText(context, text, x, y, maxWidth, lineHeight) {
    var words = text.split('');
    var line = '';
    //alert(context);
    for(var n = 0; n < words.length; n++) {
        var testLine = line + words[n] + ' ';
        var metrics = context.measureText(testLine);
        var testWidth = 20;
        if (testWidth > maxWidth && n > 0) {
            context.fillText(line, x, y);
            line = words[n] + ' ';
            y += lineHeight;
        }
        else {
            line = testLine;
        }
   }
   context.fillText(line, x, y);
}

2)保存图片的阶段代码

stage.toDataURL({
    callback: function(dataUrl) {
    /*
    * here you can do anything you like with the data url.
    * In this tutorial we'll just open the url with the browser
    * so that you can see the result as an image
    */
        $('#theimage').attr('src',dataUrl);
        $.ajax({
            type: "POST",
            url: "save.php",
            data: { imageData: dataUrl },
        });
    }
});

请指教。

提前感谢您的时间和考虑。

-奈蒂克。

Answer 1

您不能使用this.getContext()._context，因为_context 是“私有”属性（以取消划线开头）。这不是 KinetiJS 的方式。以context为例：http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-shape-tutorial/

您的解决方案：

var sampleText = new Kinetic.Shape({
    drawFunc: function(ctx) {
        ctx.beginPath();

        var maxWidth = 2;
        var lineHeight = 25;
        var x = 0;
        var y = 0;
        var text = 'Sample Text';
        ctx.setAttr("font", '15pt Calibri');
        ctx.setAttr('fillStyle','green');
        //Function for vetical text display
        wrapText(ctx, text, x, y, maxWidth, lineHeight);
        ctx.closePath();
        // KineticJS specific context method
        ctx.fillStrokeShape(this);

   }
});
function wrapText(context, text, x, y, maxWidth, lineHeight) {
    var words = text.split('');
    var line = '';
    //alert(context);
    for(var n = 0; n < words.length; n++) {
        var testLine = line + words[n] + ' ';
        var metrics = context._context.measureText(testLine);
        var testWidth = 20;
        if (testWidth > maxWidth && n > 0) {
            context.fillText(line, x, y);
            line = words[n] + ' ';
            y += lineHeight;
        }
        else {
            line = testLine;
        }
   }
   context.fillText(line, x, y);
}

演示：http://jsbin.com/xolen/1/edit

注意： KineticJS 的上下文没有measureText 方法，所以你必须使用_context 属性。我想measureText 方法很快就会添加。