Skip to main content
N
nikog27191247
Participant
March 13, 2017
Answered

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

  • March 13, 2017
  • 2 replies
  • 2124 views

вот код, в формате 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сибо большое за внимание !

This topic has been closed for replies.
Correct answer Colin Holgate

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


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

2 replies

Colin Holgate
Colin Holgate
Inspiring
March 13, 2017

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
Colin Holgate
Inspiring
March 13, 2017

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
Colin Holgate
Inspiring
March 13, 2017

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

UDESCO
Adobe Employee
UDESCO
Adobe Employee
March 13, 2017

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

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices