JavaScript, Canvas рисование текста в пиксели?

[nikog27191247]

вот код, в формате javascript :

var mask = new createjs.Shape();
        mask._off = true;
        mask.graphics
            .p("AEMCVIgHgEIgGgFQgCgEAAgDIACgHIADgFIAGgEIAHgBIAIABIAKAFIAHABQAFAAADgDIAHgHIAFgIIAPggIhPiQIAjAAIA7BsIAwhsIAQAAIhOCyQgFALgGAIQgHAIgHAGQgHAFgHADQgIACgHAAgAh8CQIAAjXIAeAAIAAAfIAKgMIANgLQAGgFAJgDQAIgDAKAAQANAAALAFQALAGAGAKQAIAKAEANQAEANAAAPQAAARgFAQQgFAQgJALQgIAMgOAGQgOAHgRAAIgMgBIgKgCIgKgDIgJgFIAABIgAhBg0IgLAGIgKAIIgIAJIAABDQAAAHADAGQADAHAFAEQAGAFAHACQAIADAJAAQAIAAAIgEQAHgFAGgIQAFgIAEgLQADgLAAgNQAAgPgDgNQgDgNgFgIQgGgIgHgFQgHgEgJAAQgHAAgGACgACCBQQgIgDgFgFQgFgFgDgHQgCgHAAgIQAAgKAEgIQAEgIAGgGQAHgGAJgFIATgHIAqgMIAAgKQAAgKgCgHQgCgIgEgEQgEgEgFgCQgGgCgGAAQgIAAgFACQgFACgCADQgDADgBAFIgCAQIgCAGIgFAFQgDABgEAAIgHgBIgFgEIgDgFIgBgIQAAgHAFgHQAFgGAIgFQAIgFAMgCQALgDAMAAQAPAAALADQAKADAHAFQAGAFADAIQADAHAAAJIAAByIgfAAIAAgVIgWAQQgGAEgHACQgHACgKAAQgJAAgHgDgACrACIgNAHIgLAIIgHAJQgDAFAAAGQAAAFACAGQACAFAEADQADAEAFACQAEADAFAAIAKgCIAJgDIARgMIAAg3gAj+BNQgOgGgKgKQgKgKgGgNQgGgOAAgPQAAgQAFgQQAGgQAKgLQAJgLAOgHQAOgGARAAQAPAAANAFQAMAFAJAJQAJAJAFAMQAFALAAANIhyAAQAAAOAEANQAEANAHAJQAHAKAKAFQAKAGAMAAQAKAAAJgDQAJgEAIgFQAHgFAFgHQAFgHADgHIAIAEQgDAMgHAKQgIALgJAHQgKAIgMAFQgLAEgMAAQgQAAgNgGgAjDgWQAAgJgDgHQgDgIgFgFQgGgGgHgDQgHgDgIAAQgHAAgGADQgHADgFAGQgFAFgDAIQgDAHgBAJIBMAAIAAAAgAAxBQIAAjdIAWgIIAIAAIAADlgAmZBQIAAiXIAeAAIAAAdIAJgNIALgKIALgHQAGgCAGAAIAKABIAHAEIAFAGQACADAAAEQAAAHgEAEQgFAEgIAAIgJgBIgKgFIgHgBIgGACIgGAFIgGAHIgGAKIAABog");
        mask.setTransform(75, 55);

вот в чём загвоздка, не пойму, какой шифр здесь. именно этот длинный код:

AEMCVIgHgEIgGgFQgCgEAAgDIACgHIADgFIAGgEIAHgBIAIABIAKAFIAHABQAFAAADgDIAHgHIAFgIIAPggIhPiQIAjAAIA7BsIAwhsIAQAAIhOCyQgFALgGAIQgHAIgHAGQgHAFgHADQgIACgHAAgAh8CQIAAjXIAeAAIAAAfIAKgMIANgLQAGgFAJgDQAIgDAKAAQANAAALAFQALAGAGAKQAIAKAEANQAEANAAAPQAAARgFAQQgFAQgJALQgIAMgOAGQgOAHgRAAIgMgBIgKgCIgKgDIgJgFIAABIgAhBg0IgLAGIgKAIIgIAJIAABDQAAAHADAGQADAHAFAEQAGAFAHACQAIADAJAAQAIAAAIgEQAHgFAGgIQAFgIAEgLQADgLAAgNQAAgPgDgNQgDgNgFgIQgGgIgHgFQgHgEgJAAQgHAAgGACgACCBQQgIgDgFgFQgFgFgDgHQgCgHAAgIQAAgKAEgIQAEgIAGgGQAHgGAJgFIATgHIAqgMIAAgKQAAgKgCgHQgCgIgEgEQgEgEgFgCQgGgCgGAAQgIAAgFACQgFACgCADQgDADgBAFIgCAQIgCAGIgFAFQgDABgEAAIgHgBIgFgEIgDgFIgBgIQAAgHAFgHQAFgGAIgFQAIgFAMgCQALgDAMAAQAPAAALADQAKADAHAFQAGAFADAIQADAHAAAJIAAByIgfAAIAAgVIgWAQQgGAEgHACQgHACgKAAQgJAAgHgDgACrACIgNAHIgLAIIgHAJQgDAFAAAGQAAAFACAGQACAFAEADQADAEAFACQAEADAFAAIAKgCIAJgDIARgMIAAg3gAj+BNQgOgGgKgKQgKgKgGgNQgGgOAAgPQAAgQAFgQQAGgQAKgLQAJgLAOgHQAOgGARAAQAPAAANAFQAMAFAJAJQAJAJAFAMQAFALAAANIhyAAQAAAOAEANQAEANAHAJQAHAKAKAFQAKAGAMAAQAKAAAJgDQAJgEAIgFQAHgFAFgHQAFgHADgHIAIAEQgDAMgHAKQgIALgJAHQgKAIgMAFQgLAEgMAAQgQAAgNgGgAjDgWQAAgJgDgHQgDgIgFgFQgGgGgHgDQgHgDgIAAQgHAAgGADQgHADgFAGQgFAFgDAIQgDAHgBAJIBMAAIAAAAgAAxBQIAAjdIAWgIIAIAAIAADlgAmZBQIAAiXIAeAAIAAAdIAJgNIALgKIALgHQAGgCAGAAIAKABIAHAEIAFAGQACADAAAEQAAAHgEAEQgFAEgIAAIgJgBIgKgFIgHgBIgGACIgGAFIgGAHIgGAKIAABog

который означает "replay"

Пример работы кода :http://jsfiddle.net/ogzr3y5v/8/

может у кого нибудь есть генератор такова шифра или статьи по этой теме

Cпaсибо большое за внимание !

[UDESCO]

Yes, the Canvas publishing from Animate produces Text as vector shapes when you use Static Text in your project.

If you change the text field type to Dynamic text, it is published as editable text itself.

Know more about it here: Create HTML5 Canvas documents in Animate CC | Static Vs Dynamic Text

[Colin Holgate]

I unmarked Nipun's message as being correct because the topic has nothing to do with text. The example graphic mask just happens to look like a word.

nikog, see this page, it converts images to Base64, which is what I think the code is:

Base64 Image Encoder

[Colin Holgate]

By the way, I may end up being wrong, I couldn't convert the code back into an image. I'm checking what other format it might be.

[Colin Holgate]

Ok, I'm on the right lines now! The code is a decodePath, which is I think Base64 encoded coordinates to draw the shape. I didn't find an encoder yet, except one from Google that is used in their maps. Anyway, read about decodeaPath here:

EaselJS v0.8.2 API Documentation : Graphics

[nikog27191247]

....eventually no longer a generator so text?

[Colin Holgate · Accepted solution]

If you create a new HTML5 Canvas FLA, and use the brush tool to draw a new shape, then publish that, in the .js file you will see the decodePath string. I tried it by drawing a blob and replacing your jsfiddle example with the code from my blob. It worked well, and drew several copies of my blob. Here the data I used (watch out for any spaces, they should be removed):

AgdGuIgWgDIgKgCIgKgCIgKgDIgLgDIgRgEIgPgIIgNgHIgMgIIgKgIIgMgHIgLgHIgMgIIgKgHIgMgIIgLgIIgMgHIgKgHIgPgIIgMgHIgKgIIgIgIIgFgHIgFgHIgIgIIgFgHIgEgIIgIgIIgFgHIgHgHIgGgIIgEgHIgGgIIgHgIIgFgHIgFgHIgIgIIgEgHIgGgIIgEgIIgIgHIgFgHIgCgIIgGgHIgCgIIgCgIIgDgHIgDgHIgEgIIgDgHIgDgIIgCgIIgCgHIgDgHIgDgIIgCgHIgDgIIAAgIIAAgHIgCgHIAAgIIAAgGIAAgIIAAgIIAAgHIAAgHIAAgIIAAgHIAAgIIAAgIIAAgHIAAgHIAAgIIAAgHIAAgIIAAgIIACgHIAAgHIAAgIIAAgHIADgIIAAgIIAAgHIACgHIAAgIIADgHIAAgIIADgIIAAgHIACgHIACgIIADgHIAFgIIACgIIAGgHIACgHIAFgIIADgHIAEgIIADgIIAFgHIAFgHIAFgIIAFgHIAIgIIAKgIIAMgHIANgHIAHgIIAPgHIAKgGIAHgCIAKgCIAXgDIBTgFIAMgIIAKgHIAPgIIARgHIAXgHIARgGIAXAAIAAgCIBFAAIAWACIAQAGIARAHIAPAHIAPAIIANAHIAMAIIAIAIIAHAHIAHAHIAGAIIAFAHIAHAIIAFAIIAFAHIAFAHIAFAFIAAADIANADIAPAEIARAIIAPAIIAPAHIAPAHIAPAIIAPAHIAMAIIANAIIAKAHIAKAHIAKAIIAKAHIAIAIIAHAIIAIAHIAEAHIAIAIIAFAHIAFAIIACAIIAGAHIACAHIADAIIAEAHIADAIIADAIIAEAHIAGAHIACAIIAFAHIADAIIAEAIIADAHIAAAHIADAIIAAAHIAAAIIACAIIAAAHIAAAHIAAAHIAAAHIAAAIIAAAIIAAAHIAAAHIAAAIIAAAHIAAAIIAAAIIAAAHIAAAHIAAAIIAAAHIAAAIIAAAIIAAAHIAAAHIAAAIIAAAHIAAAIIgCAIIAAAHIAAAHIgDAIIgDAHIgCAIIgCAIIgDAHIgDAHIgEAIIgDAHIgFAIIgFAIIgFAHIgFAHIgIAIIgHAHIgHAIIgIAIIgFAHIgFAHIgFAIIgIAHIgHAIIgHAIIgKAHIgNAHIgPAIIgPAHIgKAIIgKAIIgKAHIgNAHIgMAIIgUAHIgPAGIgIACIgJACIgXADIi9AAg

[nikog27191247]

Thanks a lot, I looked at 10 forums for an answer to the question and nobody knew. Respect !

[Colin Holgate]

As a point of interest, I didn't know either! But I'm very good with Google, and knew enough to know what to look for.

[nikog27191247]

I want to ask you something, when I write text there he pundit on different shape, how can I put it to be just a shape

[Colin Holgate]

Type some text into a textfield, then select the textfield and do Break Apart twice. That will convert the text into shape data. When you publish that the Javascript should give you the decodePath text for all of the letters in one chunk.

[nikog27191247]

Many thanks !

Props to soccermomof1: Genius!

---

You're a genius! Thank you man !