For example:
one tap is moving a shape.
Another tap is moving another shape at same time.
I have shared a small experiment I did on Kinetic + Multi Touch here. Have a look - perhaps it can help until "real" multitouch becomes available in Kinetic
You can set up a Kinetic Group like this:
http://www.html5canvastutorials.com/kineticjs/html5-canvas-complex-shapes-using-groups-with-kineticjs/
Here's how to declare an empty group and make it draggable:
var group = new Kinetic.Group({
x: 220,
y: 40,
draggable:true
});
So in the tap handler of a shape, you can add the tapped object to the group.
circle.on('tap', function() {
group.add(circle);
});
Then you can drag the assembled group as necessary.
And if you need multiple groups, you can move individual shapes between the different groups like this:
http://www.html5canvastutorials.com/kineticjs/html5-canvas-move-shape-to-another-container-with-kineticjs/
circle.moveTo(someOtherGroup);
In the case of dragging two shapes at the same time, you will have to grab the touch event from the browser and read it as
touches[0] and touches[1] events
This is how you differentiate between separate touch events occurring simultaneously
official kineticjs example:
http://www.html5canvastutorials.com/labs/html5-canvas-multi-touch-scale-stage-with-kineticjs/
Related
I have a simple Threejs code where I am testing the click event with Raycaster. I used the BOX geometry to create three cubes. Using CSS2DRenderer.js, I have added a label above one of the cubes. I want to click on the label to bring up a popup with some information. I see that the cubes are detected when I click, but the label is not. Is the raycaster limited to meshes? If that's the case, how do I detect my label on click? You can find the click event code below:
window.addEventListener('click', event => {
raycaster.setFromCamera(clickMouse, camera);
const found = raycaster.intersectObjects(scene.children);
console.log(found);
});
You can only use Raycaster for detecting 3D objects like meshes, point clouds or lines. For labels rendered via CSS2DRenderer, you can just add a pointerdown event listener to the respective label DOM element.
I have a google map with drawing overlays for rectangle, circle, polygon. Everything is cool but I want to clear the overlays before I start drawing a new one (automatically).
There doesn't seem to be any way to clear it via an existing Google Maps control and I don't want to create some custom button for it.
google.maps.event.addListener(this.map, 'mousedown', function(event) {
console.log('map mousedown');
console.log(_this.drawingManager.getDrawingMode());
});
I'm trying to clear the maps when a mousedown event occurs on the map. But it seems when the map is in "drawing mode" this event doesn't fire. I also can't find any documentation on any kind of mouse events for the drawing control.
Is there a way to fire a mousedown even when in drawing mode (drawing a circle, rectangle, polygon, etc) ?
There isn't a way to fire a mousedown event on map when in drawing mode I know of, but still I think there are two possible ways for you to go:
A. Only if you are using custom buttons for drawing manager (meaning you set drawingControl: false when initializing DrawingManager and create your own buttons). Then, when any drawing button was pressed, e.g. button for drawing a polyline, you can listen for the event which is fired when drawing was complete, and setDrawingMode to null which ensures that user will have to click one of the icons again to start drawing, where you can in the same click listener delete all existing drawings. For example (illustrational, depends on your setup):
$('#polylineButton').on('click', function(){
//delete any previous existing drawings on map
drawing_manager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);
google.maps.event.addListenerOnce(drawing_manager, 'overlaycomplete',function(polyline) {
drawing_manager.setDrawingMode(null); //set to hand cursor after overlay was drawn
..
}
...
});
So this solution wouldn't require any additional buttons on the map, only those required to select respective drawing tools (hand, polyline, circle, etc.)
B. You cannot listen for the map click event, but you can still listen for a click event on the div containing the map. In that case you can, also with leveraging overlaycomplete event, set up some variables indicating when drawing started. Something similar to what was done in this answer .
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.
I'm writing drag & drop functionality in my HTML5 Canvas application and am wondering how to detect if I'm clicking on a shape other than a rectangle or square, in which case I would do something like this inside of my 'mousedown' event handler:
if (evt._x > 13 && evt._x < 202 .... ) {}
I don't see how to easily do something like that with an arc like this:
ctx.arc(25, 25, 20, 0, (Math.PI/180)*360);
I hope that is clear, thank you in advance.
Just use isPointInPath, which checks if a given point is within the current drawing path. If you're drawing multiple shapes to the canvas, than a good technique is to associate each of your shapes with a "hidden" canvas, draw each path to its respective canvas, than test isPointInPath against each of these, offsetting the destination/mouse coordinates as needed. Theres no reason to resort to your own calculations for this.
First you check if the click is within a shape's bounding box (the smallest rectangle which fully encloses the shape). If it is, then you do the more complex math to determine if the click is within the shape itself. You'll have to implement this math yourself as I don't think there's anything built-in for it.
You'll get the formula you need here and also in Polygon article of Wikipedia.
This may sound stupid, but you can use <area> tags inside a <map> over an <img> to create interactive polygonal shapes. They have their own onclicks/mouseovers/etc. already implemented by all browsers.