How to rotate plain images using Raphaël? - javascript

This may or may not be a very trivial question, but then again, I'm completely new to this JavaScript library (i.e. only started reading about it today).
Exactly how do I proceed to rotating a simple image (png/jpeg etc) on my server using Raphaël? Does it need to first be converted to SVG beforehand?
In other words, I would need to replicate this demo on http://raphaeljs.com

You would put your image on the canvas and apply a rotate transform to it. Here's an example:
var paper = Raphael("thepaper", 300, 300);
var theImage = paper.image("http://i.stack.imgur.com/Zg08b.png", 0, 0, 128, 128);
theImage.transform("R45");
You can see a working demo of that here.
You can animate that pretty easily by applying an animation. Change the last line to this:
theImage.animate({"transform": "R45"}, 10000);
You can see that working here, and that will rotate it 45 degrees over 10 seconds.

Related

Using SVG with ajax to animate state of IO hardware

The company I'm working for is selling micro computers that can manage and monitor diffrent IO devices.
They are using ajax for the web IO stuff and I created a new graphic for a Voltmeter that contains 41 states from 0 Volt to 20 with 0,5 stepping.
My first question would be, if that is being called a sprite because there are so many images?
The code I wrote to load the images was already much shorter than the company's because I made a function to generate the img links via a counter.
var i = 1;
function counter()
{
var img = "http://"adress"/"+i.toString()+".png";
if (i == 40)
{
i=0;
}
i++;
document.getElementById('picture').src = img;
}
now the next step I was asked was doing that with a svg.
I could do the same thing with a svg of course, but I´ve read about being able to animate svg.
The first big question is:
Should I make a svg file that contains all 41 images as code or should I just do one image and animate the needle by creating an own pivot for it?
Note that the animation states would be hand in hand with a javascript code that "GET"s hex values via xmlHTTP which define the states of the device.
So i wanna turn the needle to 3 volts on the svg if I rotate the knob at the device.
I don't ask for a full solution but some hints if this would even be possible and what i need to read about.
Here is the img I am talking about as an example
Voltmeter
https://www.deviantart.com/blue-lovag/art/Voltmeter-759876423
An SVG with 41 groups in it might be a big file. If you create an SVG containing just one image, where the needle is a <g> group with an ID defined on it, you can refer to that group from JavaScript and have the needle rotate -- even with a smooth animation.
You might define a CSS class for each state the needle can be in, with the rotation in it:
.pos20 {
transform: rotate(45deg);
}
There are some gotchas with Internet Explorer support for this, so you may have to set an attribute on the group directly:
<g transform="rotate(45deg)">...</g>
Please refer to this article on CSS-Tricks for details on SVG transformations.

Scaling a shape in Phaser 2 without having it move

So, I'm trying to create a (very) simple progress bar in Phaser, (initially it's empty) and getting it to resize/scale to a specific size.
I'm not a fan of erasing and redrawing, since I assume this is more resource-heavy / not as efficient as simply tweening.
Whenever I scale its width, it insists on moving to the right - it is also updating its X coordinate as well.
I do know that we should change/set the anchor. I tried setting it to 0.5 (center), to 0 (left, top) and to 1.0 (bottom, right) as I saw in this question (and in the Phaser forums), but no matter the value that I set, the progress bar always moves (and always to the same place) as well.
Here is my code:
//Fill
var graphs = game.add.graphics(0, 0);
graphs.lineStyle(2, 0xFF0000, 1);
graphs.beginFill(0xFF0000, 1);
progressBar = graphs.drawRect(100, 50, 1, 20);
progressBar.anchor.setTo(0.5, 0.5);
//Outline
graphs = game.add.graphics(0, 0);
graphs.lineStyle(2, 0xFFFFFF, 1);
progressBarOutline = graphs.drawRect(100, 50, 100, 20);
progressBarOutline.anchor.setTo(0.5, 0.5);
//Resize it whenever the user presses the game area
game.input.onDown.add( resizeProgressBar, this );
And here is the code that I call to resize the (fill) bar (currently done through a tween):
function resizeProgressBar()
{
game.add.tween(loadingProgressBar.scale).to( { x: 2.5},
1000, Phaser.Easing.Quadratic.InOut, true);
}
Here is a fiddle that shows the issue (click on the canvas to update the bar).
This can't be that complicated. Am I forgetting something? Or am I supposed to calculate the new x position myself?
I'm using Phaser CE 2.11
I'm not sure why the height of the progressBar is growing, nor why it's moving, as I haven't done much with the raw graphics drawing capabilities in Phaser. However, there's a few things I do know which might help.
The difference between the questions you've linked to and your progress bar is that you're using raw graphics, instead of sprites.
If you switch to using a sprite-based progress bar you could either scale or set the width, depending upon what your progress graphic looks like.
Another option would be to do something similar to this tutorial for progress bars in Phaser 3. The relevant bits are defining the progress bar and then creating it:
var progressBar = this.add.graphics();
/// ...
this.load.on('progress', function (value) {
progressBar.clear();
progressBar.fillStyle(0xffffff, 1);
progressBar.fillRect(250, 280, 300 * value, 30);
});
You can change the last five lines as needed for your particular circumstances.
While this does clear and then redraw the rectangle, I personally haven't seen much of a performance hit doing this. At least with older versions of Phaser 2, using Sprites instead of Graphics seems to be the way to go. Of course, it also depends upon how often and how many of these progress bars you'll be displaying.

How to make a 'Flash' effect over a Sprite in Phaser.js?

I'm creating an Rpg in Phaser, and I'm trying to make a Flash effect happen over a Sprite -that means turning the Sprite all white for a moment and then returning to its original color-.
So my question is: what's the best way of achieving this effect?. I've tried two solutions so far, but i'm missing something:
Solution 1:
I tried tweening the tint parameter of the sprite, like this:
this.game.add.tween(enemy).to({
tint: 0xffffff,
}, 100, Phaser.Easing.Exponential.Out, true, 0, 0, true);
But it doesn't work since setting the tint to 0xffffff is the same as setting it to its default color.
Solution 2:
My second possible solution is adding a white square that has the same size of the sprite, and using the actual sprite as a mask for the square:
var flash = this.game.add.graphics(0, 0);
flash.beginFill(0xffffff);
flash.drawRect(enemy.x, enemy.y, enemy.width, enemy.height);
flash.endFill();
flash.mask = enemy // enemy is my Sprite
/* .. code for tweening the flash */
The problem with this solution is that the mask needs to be a PIXI.Graphics object; and I'm using a Sprite object.
So please, any guidance would be appreciated.
In the version of Pixi that Phaser 2.2.2 uses there is a 'tintCache' which basically rounds the tint value, then caches the result. This means you can't do subtle tint ramping like you're trying to do with a tween. We removed this in Phaser 2.3, so it will be available from then, but as of now it's still in dev.
Also you can tint to a 'near white' colour - only 0xffffff precisely resets the tint. But a value very close to that would still be set ok and probably have the desired result.
If you're using WebGL I would still use a tint with 'as near as white as possible' colour values and tween them. You could disable the tint cache for yourself by copying that part of the changed code from the Phaser dev branch.
In Canvas mode it's expensive though as it has to recalculate the pixels every single time you update it.
If you need to worry about Canvas performance then honestly I would create a new PNG that matches your sprite, colour it in all-white and display it over the top of your main sprite as needed and alpha it out. It's less than ideal because of the extra assets required, but it would be the fastest in canvas mode for sure. All depends on your game though is that's acceptable or not.
Edit: Also occurred to me that you could probably achieve what you need by using a blend mode too, such as lighten. You'd duplicate your main sprite, set the blend mode on it, display it over the top of your sprite and fade it out. This would work fine in Canvas at least.
You can use a ColorMatrixFilter on the Sprite. In Phaser, you may have to manually load in the PIXI script first:
game.load.script('filter', 'js/filters/ColorMatrixFilter.js');
Use this for white:
var filter = new PIXI.ColorMatrixFilter();
filter.matrix = [1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,1];
this.game.filter = [filter];
You can also tween the matrix values if you want a smooth transition.

Raphael inner glow?

I am looking for a way to achieve only an inner glow or shadow on a raphael path. Unfortunately, you can only do radial gradients on an ellipse or a circle.
One idea may be to create a series of paths which are slightly smaller and fit inside the original path and then to give them different stroke colors, but I have no idea how I would approach that. Some function that takes the path and subtracts or adds values to the numbers depending on where they are... Anyway, if anyone has any ideas, or maybe another javascript library that does this, that would be great.
Ok here is how you can achieve that. It is pretty straightforward I think. I know it is hard to manually create a shadow path from your original. But there is a trick called scale() function. Steps to how you can get inner shadow or inner glow effect:
Create your path
Clone it into another path
Set the scale() of cloned path to be 0.9*original
Then hide the cloned path, but apply glow() function on it
The code:
var paper = Raphael("notepad", 500, 500);
var path = paper.path("M 50 200 L 120 100 200 190 80 250z");
var shadow = path.clone().scale(0.9).hide();
shadow.glow();
path.attr({stroke: "darkred"});
Look at the DEMO, this is not perfect but with minor changes, yo can get what you want.
Also as a side note:
glow() function has attributes like offsetx, offsety, opacity... Changing those attributes will give you your preferred shadow/glow.
UPDATED CODE http://jsfiddle.net/jUTFm/41/
Look here. You could try animating the width of the path and darkening the color gradually to give some kinda glowing effect.
check out the bottom part
brain = paper.add(brain);
brain.attr('stroke', '#ff0');
brain.transform('s 0.5, 0.5 0 0');
glow = brain.glow({
color: '#ff0',
width: 5
});
anim = Raphael.animation({
"stroke-width": 15,
opacity: 1
}, 500);
anim = anim.repeat(Infinity);
glow.animate(anim);

JavaScript-clearRect()-pendant for ActionScript?

Is there a ActionScript-version of JavaScript's Canvas.clearRect()?
I only know graphics.drawRect(...) which allows me draw but not remove rectangles.
If there is no such method in ActionScript, how can I emulate it?
There is not an equivalent in ActionScript to clearRect. If you need to do that, then you may want to have multiple sprites, and draw to them separately. That would allow you to adjust z-order, and to remove sections.
If you need to cut out a section of a shape, then you can use drawPath.
mike
graphics.clear();
Not very intuitive, but, in the same fill operation, redrawing again on the same pixel will actually "cut it". So, for example:
graphics.clear();
graphics.beginFill(0x000000);
graphics.drawRect(0, 0, width, height);
graphics.drawRect(10, 10, width - 10, height - 10);
graphics.endFill();
Should actually draw an external border of 10 pixels, leaving the rest of the object transparent. However, once you finish the fill operation, AFAIK there is no way to clear an area without clearing all the graphics of the DisplayObject.

Categories