![]() ![]() ![]() You may have noticed there are two more optional parameters of the drawing method: GearStyleKit.drawHouseIcon(canvasElement) Var canvasElement = document.getElementById('mainCanvas') You can either pass the ID of the canvas here as a string, or you can pass the canvas object itself, like this: The first argument of these drawing methods is always the canvas into which you wish to draw. We just call the drawHouseIcon on the GearStyleKit object, and it works. Now, let's add code for actually drawing the House Icon into the element: Import the generated StyleKit JavaScript file and make sure you have a element in your HTML document. Let's look at how you would actually use this method on your website.įirst, you need to have at least a very simple HTML code to test this out: GearStyleKit.makeRect(x, y, width, height)Īs you can see, there is a "drawGears" method available in this StyleKit object. GearStyleKit.drawGears(canvas, targetFrame*, resizing*) Available methods for drawing into elements: (the GearStyleKit object is later filled-in with useful methods)Īt the top of the generated JavaScript code, you'll find comprehensive documentation of all methods available to you from the StyleKit object: You can also see it being created in the generated code: The "Name" attribute is the name of the StyleKit JavaScript object that will be available to you in your JavaScript code after you import the code generated by PaintCode. These are important, so make sure you fill them up correctly before exporting the generated code. On the right, there are several StyleKit settings in the inspector: In this case, there is only one drawing available, the "Gears" drawing.īelow the catalog, you can see the generated code. ![]() In the middle, you can see a catalog of all drawings available in your StyleKit. Let's switch to the "StyleKit" tab in PaintCode. Imagine we draw a gear icon in PaintCode, like this one: To learn more about StyleKits, please see the StyleKit documentation. This JavaScript file contains all your PaintCode drawings (you can have multiple drawings in a single PaintCode document). PaintCode exports a single JavaScript file we call "StyleKit". We've prepared an example project for you: Download example The generated code is also resolution-independent, so the drawings will appear sharp and crisp on all kinds of displays and pixel densities. Most of the animated and interactive graphics on our title page and what's new page were creating using JavaScript export from PaintCode. This is a great way to add dynamic and interactive drawings to your website. This code can be used to draw into HTML elements on your website. With PaintCode 3, you can now generate JavaScript code. ![]()
0 Comments
Leave a Reply. |