Home » Blogs » Mgccl's blog

Step by step showing you imarty 0.04's power!

Sun, 02/18/2007 - 22:38 | by Mgccl

Well, let me show you what I can do with my newest release of Imarty by doing one step at a time.
This is all the code you need

$imarty = new imarty('imagefile.xml');//get the XML file
$imarty->render();//render image
$imarty->output_image('gif');//out put gif image

First, let us create a image! Everything below is just changes of the imagefile.xml

<image w="20" h="20" cache="">
</image>

This defines the image's height and width, the cache system does not work yet but it will soon.
Now, add an layer.

<image w="20" h="20" cache="">
    <layer w="20" h="20" x="0" y="0" opacity="100" antialias="on">
    </layer>
</image>

Let's render and see what it looks like now:
First Result

Right, boring black, let's add something to it, how about a line!

<image w="20" h="20" cache="">
    <layer w="20" h="20" x="0" y="0" opacity="100" antialias="on">
        <line x1="1" y1="1" x2="5" y2="5" color="#FFFFFF" />
    </layer>
</image>

Imarty 2

Then, I chose to add a pixel:

<image w="20" h="20" cache="">
    <layer w="20" h="20" x="0" y="0" opacity="100" antialias="on">
        <line x1="1" y1="1" x2="5" y2="5" color="#FFFFFF" />
        <pixel x="10" y="5" color="#FFFFCC" />
    </layer>
</image>

The result is shown below:
Imarty 3

Yes, right, there is NOTHING interesting right now, so that's why I'm drawing a filled circle now:

<image w="20" h="20" cache="">
    <layer w="20" h="20" x="0" y="0" opacity="100" antialias="on">
        <line x1="1" y1="1" x2="5" y2="5" color="#FFFFFF" />
        <pixel x="10" y="5" color="#FFFFCC" />
        <ellipse x="10" y="10" w="6" h="6" color="#FF0000" fill="on" />
    </layer>
</image>

Much better :)
Imarty 4

Let's add some filter to it! anyone who uses photoshop will know that filter is the soul of PS:

<image w="20" h="20" cache="">
    <layer w="20" h="20" x="0" y="0" opacity="100" antialias="on">
        <line x1="1" y1="1" x2="5" y2="5" color="#FFFFFF" />
        <pixel x="10" y="5" color="#FFFFCC" />
        <ellipse x="10" y="10" w="6" h="6" color="#FF0000" fill="on" />
        <filter name="rgb_inverse" />
    </layer>
</image>

Ok, the image's RGB values is the inverse of the original image.
Imarty 5
Finally, I want to cover another layer on top of the original one, and with 50% opacity so what in the background will still be shown. The layer is a gif file:
Here is the image:
smile

<image w="20" h="20" cache="">
	<layer w="20" h="20" x="0" y="0" opacity="100" antialias="on">
		<line x1="1" y1="1" x2="5" y2="5" color="#FFFFFF" />
		<pixel x="10" y="5" color="#FFFFCC" />
		<ellipse x="10" y="10" w="6" h="6" color="#FF0000" fill="on" />
		<filter name="rgb_inverse" />
	</layer>
	<layer w="20" h="20" x="0" y="0" opacity="50" src="image/smile.gif" />
</image>

The final result

final imarty


Tags:

Comments

Post new comment

  • Allowed HTML tags: <img> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <span> <fn>
  • Lines and paragraphs break automatically.
  • Use [fn]...[/fn] (or <fn>...</fn>) to insert automatically numbered footnotes.
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>. The supported tag styles are: <foo>, [foo].
  • Mathematical equations and graphs can be added between [tex] and [/tex], [graph] and [/graph] tags.
  • Textual smileys will be replaced with graphical ones.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
2 + 2 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.
Honey Pot that kill bots