어떻게 Easeljs Graphics 객체를 base64로 변환 할 수 있습니까?

Question

그래픽 객체에 스트로크와 채우기를 추가하는 방법이 있는데, base64 문자열을 기반으로 Graphics 객체에 채우는 방법이 있지만 반대의 변환을 수행하는 방법이 있습니까? 즉, Graphics 객체에서 base64 문자열을 만드시겠습니까? 그 이유는 Graphics 객체를 문자열 형식으로 저장하고 나중에 Graphics 객체로 디코딩 할 수 있도록하기 위해서입니다. 그 일을하는 easeljs 함수가 있다면 그것은 내가 선호하는 방법 일 것이다. 그렇지 않다면 그래픽 정보에 액세스하여 문자열로 변환 할 수있는 방법이 있는지 알고 싶습니다.

Answer 1

누군가 내 질문에 대한 찬성표를 던졌기 때문에 답변을 드리겠습니다.

짧은 대답은 아니오, 그렇게하는 기능이 없습니다. http://community.createjs.com/discussions/easeljs/7828-is-there-a-way-to-convert-an-easeljs-graphics-object-to-a-base64-string

하지만 스스로 해결할 수 있습니다. http://www.createjs.com/Docs/EaselJS/files/easeljs_display_Graphics.js.html#l1041

아래는 예시적인 함수이다 http://www.createjs.com/Docs/EaselJS/classes/Graphics.html#method_decodePath

디코더의 소스 코드에서이다 CreateJS는베이스 64 인코딩에 사용하는 패턴에 대하여 설명한다. 그러나 직선 만 인코딩합니다. 2 차 곡선이나 베 지어 곡선을 인코딩하지 않습니다. 또한, 내가 기억한다면 작은 x 및 y 값에 대해 문자열 크기를 최적화하지 않습니다. 누군가가 더 완벽한 해결책을 가지고 있고 기꺼이 공유하고 싶다면 실제로보고 싶습니다. 시간이 있다면 실제로 다음 달 또는 2 월 중 일부 프로젝트로 돌아갈 계획입니다.

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; 
}