Of course it would be but why reinventing the wheel again if there is a nice tool already ???!!! I talk about Patternizer which is a really nice tool to create stripe based HTML5 canvas patterns online.
Ok, that means we have a tool that creates stripe based patterns on the web...and how could we use those patterns in JavaFX 2.2 ???
Well in Patternizer one could create a pattern and get the code that could then be used in combination with the patternizer javascript to draw the pattern in HTML5 Canvas. The code that will be created by Patternizer looks like this...
Fortunately the creator of Patternizer has put the code on Github where i forked it and ported it to JavaFX. I put the code into two classes
- Stripe
- Pattern
The Stripe class represents the definition of the Patternizer stripes and the Pattern class defines a set of Stripes with a given background color.
To make the usage as easy as possible I've created a little conversion method that takes the code created by Patternizer and creates a Pattern object from it. This means you could create your pattern online with Patternizer, create the javascript code, copy the code and paste it as string to the static method
pattern = Pattern.getFromPatternizerString(PATTERNIZER_CODE_STRING);
and you are good to go and use this pattern as a fill pattern by calling
shape.setFill(pattern.getImagePattern(shape.getLayoutBounds()));
and that's it...
As an example I've created the pattern that you see on the screenshots and converted the given Patternizer code like this...
private static final Pattern PATTERN = Pattern.getFromPatternizerString("{\n" +
"stripes : [ \n" +
" {\n" +
" color: '#ffed0d',\n" +
" rotation: 200,\n" +
" opacity: 72,\n" +
" mode: 'plaid',\n" +
" width: 2,\n" +
" gap: 98,\n" +
" offset: 16\n" +
" },\n" +
" {\n" +
" color: '#550000',\n" +
" rotation: 200,\n" +
" opacity: 43,\n" +
" mode: 'plaid',\n" +
" width: 30,\n" +
" gap: 70,\n" +
" offset: 80\n" +
" },\n" +
" {\n" +
" color: '#080070',\n" +
" rotation: 200,\n" +
" opacity: 50,\n" +
" mode: 'plaid',\n" +
" width: 10,\n" +
" gap: 10,\n" +
" offset: 0\n" +
" }\n" +
"],\n" +
"bg : '#ffffff'\n" +
"}");
When using this PATTERN as fill style for a shape you will get something like this...
Nice isn't it...?
For those of you that don't like the Copy-Paste thingy you could create the same pattern also in code like this...
private static final Pattern PATTERN = Pattern.Builder.create()
.backgroundColor(Color.web("#ffffff"))
.stripes(new Stripe[]{
Stripe.Builder.create()
.color(Color.web("#ffed0d"))
.rotation(200)
.opacity(72)
.mode(Stripe.Mode.PLAID)
.width(2)
.gap(98)
.offset(16)
.build(),
Stripe.Builder.create()
.color(Color.web("#550000"))
.rotation(200)
.opacity(43)
.mode(Stripe.Mode.PLAID)
.width(30)
.gap(70)
.offset(80)
.build(),
Stripe.Builder.create()
.color(Color.web("#080070"))
.rotation(200)
.opacity(50)
.mode(Stripe.Mode.PLAID)
.width(10)
.gap(10)
.offset(0)
.build()
}).build();
If you created a nice pattern by playing around with these parameters in JavaFX and would like to use this pattern also on your website with patternizer.js you simply could call the getAsPatternizerString() method in the Pattern class which will give you the same output that the Pattenizer page does.
And here are the source files as plain java files:
To make it a little bit more easy to play with these things I've added some patterns in the PatternizerFX.java file so that you take a look at it.
Finally I've also created a little YouTube video that shows how easy it is to use.
Thanx to Matthew Lein and Dave Johnson which created Patternizer.
So enjoy JavaFX and keep coding...
No comments:
Post a Comment