I have drawn a box. The first animation makes the box move horizontally and the second one moves the box vertically. But when the second animation is executed the box first comes back to its original position and then animates vertically. What I want is that the box shouldn't come back to its original position and where the first animation ends, the second animation must execute exactly from that position. How can I achieve this? What am I doing wrong?
JS Fiddle Code
window.onload = function (){
var paper = Raphael(0,0,800,400);
var hi = paper.rect(10,10,100,30);
var move1 = Raphael.animation({
transform:'t100,0'
},1000);
var move2 = Raphael.animation({
transform:'t0,100'
},1000);
hi.animate(move1);
hi.animate(move2.delay(1000));
}
Hey here's the updated working fiddle
The reason being as you may know small t transforms relative to the current position of the rectangle. By current position it means the x and y attributes of the element, the rectangle in our case.
But the first line in Element.transform says
translation doesn’t change x or y of the rectangle
Which means after you perform 't100,0' the x & y attributes of the rectangle is still the initial 10,10 Hence the second animation is executed with respect to 10, 10
Finally, for the result you are expecting, you need to be able to change x & y attributes which can be done as shown in the fiddle....Hope this helps !
Related
i have an application in qt that loads an image. The user can set a cross by moving the slider with setPixel(). If he decrements the slider, the cross should become smaller and the original pixel should be displayed.
But unfortunately nothing happens when I decrement the slider. The cross keeps its maximum size.
The function, that sets the Pixel
void ImageViewer::applyExampleAlgorithm(int kreuzBreite)
{
if(image!=NULL)
{
for(int i=0;i<((kreuzBreite*std::min(image->width(), image->height())/ 100) / 2);i++)
{
image->setPixelColor(image->width()/2+i,image->height()/2,QColor(255,0,0,0));
image->setPixelColor(image->width()/2-i,image->height()/2,QColor(255,0,0,0));
image->setPixelColor(image->width()/2,image->height()/2+i,QColor(255,0,0,0));
image->setPixelColor(image->width()/2,image->height()/2-i,QColor(255,0,0,0));
}
}
updateImageDisplay();
renewLogging();
}
My Slider
QSlider *slider1 = new QSlider(Qt::Horizontal,0);
slider1->setRange(0,100);
connect(slider1, SIGNAL(valueChanged(int)),this, SLOT(applyExampleAlgorithm(int)));
As you can see, the value changes, but my cross does not.
I think I have to save the original pixel and rewrite it, as soon as the red cross disappears at this point. But I dont really know how.
When the slider value decreases, your function only "draw" a smaller red cross in the bigger one that was drawn before. You can store the original image in a different variable. Then, before drawing the red cross, restore to the original image.
I'm using QSlider object in my Qt application and I want to get the position of the slider bar upon moving it. I tried using pos() function, but it always returns QPoint() with the same values of x and y (i suppose it returns position of top left corner of slider):
ui->horizontalSlider->pos();
Then I tried dividing the slider width by 100 and adding that value multiplicated by slider value() to most-left position:
SliderStep = ui->horizontalSlider->width()/100;
(ui->horizontalSlider->value()) * SliderStep + ui->horisontalSlider->geometry().x();
It kind of works for me, but values are not very accurate since SliderStep has to be double and coordinates are integer values. I always noticed that I can get slider values by either using value() or sliderPosition() functions since they always return the same value for me:
qDebug()<<ui->horizontalSlider->sliderPosition();
qDebug()<<ui->horizontalSlider->value();
So my question is, is there a more convinient or "right" way to get coordinates of a slider bar? What's the difference between those two functions? Any help is appreciated.
When selecting a Marker an InfoWindow pops up.
Sometimes the selection of a Marker is difficult. Especially when the map is rotating in the direction of navigation.
How can I increase the 'touch circle' so that selection is easier?
Update: I have to change the hitTest() for the Marker by subclassing.
I would like to check whether the 'hit' (or touch) was within a circle of X pixels around the point of the Marker. The icon will rotate while I navigate, so I guess I don't use the icon.
How can I do that?
public boolean hitTest(final MotionEvent event, final MapView mapView){
final Projection pj = mapView.getProjection();
pj.toPixels(mPosition, mPositionPixels);
// Does mPositionPixels contains the x, y of the Marker?
// Should I draw a Rect around this point, or could it be a circle?
// How can I check whether the event.getX(), event.getY() is a hit?
return hit;
}
Method proposed by spy is feasible.
You can also create your icon bitmap with an area of transparent pixels around. This is a very simple way to increase its touch area.
I believe #Mker would say, extend the Marker class and override the method hitTest. That is used for the Marker itself. I'm not sure if you can change this for the InfoWindow itself.
Trying to very simply scroll a famous Scrollview to a pixel position with a transition. It looks like Scrollview's setPosition function will set the scroll position in pixels (right?). But how do I add a transition to this.
My first thought was to use a Transitionable to move from the scrollview's getPosition to the end position, but this led to another question: How do I watch a transitionable?
Thanks!
Right now the famous Scrollview does not support setting the position with any kind of transition. There are a number of things you can do to simulate the transition, such as dividing the total difference in position by the length of the transition and then adding that value to the position every render frame. This would give the illusion of a transition.
Probably quite a simple question! I'm making a side scrolling shooter game using Xcode5, with Cocos2d Version 3.
When the main character (on the left of the screen) flies up and down, I want the enemy (on the right of the screen) to follow him along the Y axis.
I've set up an action so the enemy enters, then moves to the main character's Y position. But the enemy moves to the main characters starting Y position, not it's current Y position.
Is there code to get the current position of a sprite? Or is there perhaps a better way to achieve this? Basically we want the enemy sprite to know the main characters Y position and move to it continuously.
Thanks
Every CCNode has a position property.
#property(nonatomic,readwrite,assign) CGPoint position;
So use this:
CGPoint position = yourSprite.position;