Trying to binb hammerJs multi-touch into my current kineticJs 5.1 codes, found tips, but my puzzle pieces does not rotate at all, and my pieces are kinetic shape, why?
var startRotate = 0;
var hammertime = Hammer(piecesArray[i][j].shape);
hammertime.on("transformstart", function(e) {
startRotate = piecesArray[i][j].shape.rotation();
}).on("transformstart", function(e) {
piecesArray[i][j].shape.rotation(startRotate + e.gesture.rotation);
layer.draw();
});
my fiddle : http://jsfiddle.net/e70n2693/20/
This example is for KineticJS v5.1.0 and HammerJS v1.0.7
You have to apply Hammer instance on Kinetic.Node instance, not on Image object.
var hammertime = Hammer(piecesArray[i][j].shape);
hammertime.on("transformstart", function(e) {
this.startRatation = this.rotation();
}).on("transform", function(e) {
this.rotation((this.startRatation || 0) + e.gesture.rotation);
this.getLayer().draw();
});
http://jsfiddle.net/e70n2693/30/
Note: I think it is better to set another center for shape via offset.
use the latest version of hammer.js v2.0.
check out the getting started guide.
"The pinch and rotate gestures are disabled by default, enable it by"
hammertime.get('pinch').set({ enable: true });
hammertime.get('rotate').set({ enable: true });
Here's an updated jsfiddle. I couldn't test it though, i can't make a rotate gesture, hope it works.
Edit:
The problem is, Hammer(imageObj, options); api expects imageObj to be an html element, in your case it's a kinetic shape. I don't know if you can get the html elements for each kinetic shapes. If not, you can listen to rotation on the .kinetic-container canvas element. So the rotation gesture is performed on the whole canvas, and you have to keep track of the last touched kinetic shape so you can rotate it.
I've setup a refactored jsfiddle, showing the ideas i mentioned, however i couldn't manage to rotate the shape using kinetic, i hope this will fix your problem, again i couldn't test it for rotate but it works for tap.
Related
I noticed that in pixi.js version 1.3, as seen in this example, stacking sprites, then click and drag only drags the top most sprite.
bunny.mousedown = bunny.touchstart = function(data)
{
// data.originalEvent.preventDefault()
// store a refference to the data
// The reason for this is because of multitouch
// we want to track the movement of this particular touch
this.data = data;
this.alpha = 0.9;
this.dragging = true;
this.sx = this.data.getLocalPosition(bunny).x * bunny.scale.x;
this.sy = this.data.getLocalPosition(bunny).y * bunny.scale.y;
};
http://jsfiddle.net/dirkk0/cXfpq/
In version 3.0.3, as seen in this example, the same code causes all the sprites under the mouse to be dragged.
http://jsfiddle.net/9tnaa31z/5/
Is there a way to get only the top most sprite or a way to get a list of all the sprites (in the order rendered)?
I think there may have been a bug in the 3.0.3 version of PIXI. I just tried it out with the latest 3.0.5 and it works as expected i.e. it drags only the top-most Sprite.
Update the External Resources in your fiddle with this latest version of Pixi.js and it should work.
Reference: https://cdnjs.com/libraries/pixi.js.
I'm building an SVG and animating it in snap.svg because of a lack of IE support for animations (thanks IE). What I have in it's most basic form is a pentagon I'd like to rotate on hover, on mouse out it then resets itself. Code is located in the fiddle below (obviously this is a cut down version of the real thing but it shows the bug clearly still)
The JS is as follows:
// Set up snap on the svg element
var svgElement = Snap("#svg");
// Create the hover on and off events
var hoverover = function() {
svgElement.select('#pentagram-one').stop().animate({transform: 's1r72,500,515'}, 1000);
};
var hoverout = function() {
svgElement.select('#pentagram-one').stop().transform('s1R0,500,515');
};
// Set up the functions for hover in and out
svgElement.select('#pentagram-one').hover(hoverover, hoverout);
Fiddle demo of this behaviour here: http://jsfiddle.net/kfs8o9mw/
The pentagon rotates as expected on the first hover in then out. However when doing it a second time the pentagon zooms in and out a bit which is completely unexpected (it's ends up at the right size but during the animation isn't). And I've been able to replicate this in IE(10), Chrome and Firefox.
Is this a bug in snap.svg or is there something wrong in the code?
Thanks in advance
You simply can remove the s1 you have defined for the scale as show in the following:
Also note that you're using a capital R in the transform event for hoverout, when it should be a lowercase r
http://jsfiddle.net/3phpbef7/2/
I would also define you pentagram element as a variable as you're using it multiple times. I've also included this in the Fiddle above.
Hope this helps
Working with javascript and the Easeljs lib and createjs, i need some help.
my program draws some circles and fills them with color. also with a Ticker they are moving and with some if statements they are bouncing from the walls of the window.
The circles are created dynamicly and the amount of circles is different everytime.
Now I need to implement a feature so that the circles will enlarge when you press them. They should get their radius +1px bigger every 30 ms. I don't know how to do that.
1. Do u use onPress for this?which callbacks do i need to use and how will i find out if the mouse is released and the circle can stop growing?
2. do i need to delete circleObject from my circlesArray or is it enough to delete it from the stage and draw them again?
I'm desperate for help, i would be glad if someone could give me some clues!
Greetings T
With the information you provided I would refer you to take a look at this EaselJS Example on github: https://github.com/CreateJS/EaselJS/blob/master/examples/DragAndDrop_hitArea.html
The onPress-Method is used there in a way that you could probably almost copy as is.
Yours could look like this:
function(target){
target.onPress = function(evt) {
target.grow = true; //or a grow-factor or so
evt.onMouseUp = function(ev) {
target.grow = false;
}
}
}(circle);
and in your tick-function you look through all circles, check for their grow==true and increase their radius if so
And 2:
Your circleObjects all are a createjs.Shape right? You don't have to delete them from the stage or from the array, you can use circle.graphics.clear(); and then redraw the circle with the new radius.
I'm experimenting of using javascript to draw something in HTML5.
And I want the shape can be interactive.
I know that I can calc the current mouse's pos whether or not fall into the shape(any shape, maybe irregular shape.) by javascript.
But it's too trivial.
Is it there some api or lib to do this calc in some convinience.
Like, just for example.
var anyshape = new Shape();
anyshape.addEventListen('mousemove', onMouseMove);
or
var anyshape = new Shape();
anyshape.onMouseMove = function(){};
Fabric.js provides shape dragging out of the box. There's also support for event listening and detection of objects clicked/hovered/etc.
var myShape = /* any shape */;
canvas.observe('mouse:down', function(e) {
if (e.memo.target === myShape) {
/* mouse down on myShape */
}
});
Also take a look at event inspector demo.
You've gotta implement all that functionality yourself or else use a library.
If you don't want to use a library, I've written a few tutorials on making movable shapes.
I'd highly recommend taking a look at SVG and seeing if that would suit your needs better. Complex paths that have event listeners and hit testing built in are already there in SVG.
http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-path-tutorial/ kinetic gives you the best and most easy way. You can now simply add multiple svgs and event listeners in a for loop.
for{
create shape code
add event listener
console log - kinetic rocks
}
Ideally there is a way to mimic the mouseover imagemap capabilities of the following javascript using touchstart and touchmove on the iphone/ipad:
http://www.netzgesta.de/mapper/
I wish to allow the iphone/ipad user to touch the map, have the country they've touched highlight, and when they drag their finger over other countries, those countries in turn light up, just as they would via a desktop browser using mouseover.
Ideas, thoughts? Is this even possible?
You might try using touchesBegan and touchesMoved to get the coordinates of your touch and then check to see if those are within the object on your map. To get these coordinates, use:
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *touch = [touches anyObject];
CGPoint touchedPoint = [touch locationInView:self.view];
//now you can use touchedPoint.x and touchedPoint.y for the coordiantes of the touched point.
}
Similarly, you can use
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *touch = [touches anyObject];
CGPoint touchedPoint = [touch locationInView:self.view];
}
There also exists touchesEnded and touchesCancelled. You can use these to get the coordinates of the touch, afterwards it is up to you to interpret these points. You could approximate rectangles for each section to be rolled over which would make this rather simple, but if you have a map with the intended functionality as the javascript map, you would need more complex shapes and would have to use other methods to define the shape.