如何将Easeljs Graphics对象转换为base64

How can I convert an Easeljs Graphics object to base64?

本文关键字：转换 base64 对象 Graphics Easeljs      更新时间：2023-09-26

我注意到Graphics对象中有一种方法可以根据base64字符串向Graphics对象添加笔划和填充，但有没有相反的转换方法？即从Graphics对象创建base64字符串？我想这样做的原因是，图形对象可以以字符串形式存储，然后解码为图形对象。如果有一个easeljs函数可以做到这一点，那将是我的首选方式。如果没有，我想知道是否有办法访问图形信息，并将其转换为字符串。

有人刚刚对我的问题投了赞成票，所以我想我会回答的。

简短的回答是否定的，没有函数可以做到这一点。http://community.createjs.com/discussions/easeljs/7828-is-there-a-way-to-convert-an-easeljs-graphics-object-to-a-base64-string

但你可以自己做。CreateJS在其base64编码中使用的模式描述如下：http://www.createjs.com/Docs/EaselJS/classes/Graphics.html#method_decodePath

解码器的源代码位于：http://www.createjs.com/Docs/EaselJS/files/easeljs_display_Graphics.js.html#l1041

下面是一个函数示例。然而，它将只对直线进行编码；它不会对二次曲线或贝塞尔曲线进行编码。此外，如果我没记错的话，它不会为较小的x和y值优化字符串大小。如果有人有一个更完整的解决方案并愿意分享，我很乐意看到它，因为如果我有时间的话，我实际上计划在未来一两个月内重新开始这个项目的工作。

kettu.BASE_64_LIST = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','i', 'j', 'k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','0','1','2','3','4','5','6','7','8','9','+','/'];
kettu.toBase64 = function(myShape) {
    var result = '';
    var prevX = 0;
    var prevY = 0;
    for(var i = 2; i < myShape.graphics._instructions.length - 1; i++) {
        var header;
        var x = 0x00000;
        var y = 0x00000;
        if(myShape.graphics._instructions[i].f == kettu.context.lineTo || myShape.graphics._instructions[i].f == kettu.context.moveTo) {
            if(myShape.graphics._instructions[i].f == kettu.context.lineTo) {
                header = 'M';
                xStart = myShape.graphics._instructions[i].params[0] * 10 - prevX;
                yStart = myShape.graphics._instructions[i].params[1] * 10 - prevY;
                x = Math.abs(xStart);
                y = Math.abs(yStart);
                prevX += xStart;
                prevY += yStart;
                x1 = (x & 0xff000);
                if (xStart < 0) x1 |= 0x20;
                x2 = (x & 0x00fc0) >> 6;
                x3 = (x & 0x0003f);
                y1 = (y & 0xff000) >> 12;
                if (yStart < 0) y1 |= 0x20;
                y2 = (y & 0x00fc0) >> 6;
                y3 = (y & 0x0003f);
                x = kettu.BASE_64_LIST[x1] + kettu.BASE_64_LIST[x2] + kettu.BASE_64_LIST[x3];
                y = kettu.BASE_64_LIST[y1] + kettu.BASE_64_LIST[y2] + kettu.BASE_64_LIST[y3];
            }
            else if(myShape.graphics._instructions[i].f == kettu.context.moveTo) {
                header = 'E';
                x |= myShape.graphics._instructions[i].params[0] * 10;
                y |= myShape.graphics._instructions[i].params[1] * 10;
                prevX = x;
                prevY = y;
                x1 = (x & 0xff000) >> 12;
                if (x < 0) x1 |= 0x20;
                x2 = (x & 0x00fc0) >> 6;
                x3 = (x & 0x0003f);
                y1 = (y & 0xff000) >> 12;
                if (y < 0) y1 |= 0x20;
                y2 = (y & 0x00fc0) >> 6;
                y3 = (y & 0x0003f);
                x = kettu.BASE_64_LIST[x1] + kettu.BASE_64_LIST[x2] + kettu.BASE_64_LIST[x3];
                y = kettu.BASE_64_LIST[y1] + kettu.BASE_64_LIST[y2] + kettu.BASE_64_LIST[y3];
            }
        }
        result += header + x + y;
    }
    return result;
}
相关文章：