Distinguish between leaving shape and entering overlapping shape (KineticJS) - javascript

I imagine this would be a pretty common issue I am having. I have one small shape on top of a larger shape. When I enter the large shape, it gets registered as a mouseenter/mouseover. But when I enter the small shape, the large shape registers a mouseleave/mouseout. This would be like if I went to the bathroom at LAX and airport personnel demanding that I go through security again for having left the terminal.
Here is a minimal JSFiddle example illustrating the problem.

This is intended. You are no longer hovering over the circle, you are hovering over the triangle. These are layers, so by your definition you're touching floorboards when standing on the carpet.
If you want the triangle to ignore events, you can call triangle.setListening(false), as shown here: http://jsfiddle.net/YcBNL/19/. This way, events will pass through it to the shape below.
Another approach is to group the circle and triangle using a Kinetic.Group, and add the event listener to the group instead of the circle.

Michael's suggestion above seemed promising, but all it does is either handicap one shape (in this case the triangle), or moves all the functionality up into the group, which is not what I want either.
Temporarily what I have done is use the mouseenter signal for the triangle and mouseleave signal for the circle, which seems to work. However, I doubt this will work for more than two overlapping shapes. If someone comes up with a better solution, I'm all ears =)

Related

Three.js TextGeometry Wordwrap - drag as group

I am working on a panorama site and want to be able to add a text label that can be dragged to the right location. It is a spherical pano for what it is worth :) The next 4 paragraphs are good info in general, especially if you are stuck like I was, but the real question starts below the +++
I originally tried using the regular canvas trick, but the canvas was too large vertically. For instance if I wanted to say "Hello World" that might be 120px wide and 15px tall, but the "transparent" canvas would be 150px tall, which would overlap other text objects, but not the panorama.
The other issue was if I wanted it to be more than a single line, so for instance if I wanted to say "Did you see this cool stream?" that could be broken up into 2-3 lines. After playing with it I got wordwrapping to work on both the canvas and the sprites, but ultimately the canvas problem killed it for me.
After that I tried Sprites, which was better about not overlapping visually the other text objects, but the canvas size was still too large which created issues in the onMouseOver intersects where if it was too close together you were likely to start dragging the wrong one around, or if you just wanted to pan / tilt the camera around to look at the panorama you may inadvertently click on the oversized canvas.
I tried multiple times to get the TextGeometry working, but always got this error "THREE.TextGeometry: font parameter is not an instance of THREE.Font." till I finally found out the API changed in the latest version which made all the examples on the web useless. After I found out about the API change, I was able to get it working, here is a fiddle for anyone that needs it: https://jsfiddle.net/287rumst/1/
++++++++++
In my app, this previous example using TextGeometry works out just fine, but only when it is a single line. When I loop through and do the next line, it becomes an extra object that you drag around individually, which becomes a problem when I want to be able to click on it to edit the text, size, color and so on.
I am not sure what to do about the issue of dragging all lines as a group. I expected it to work when I added the group to the objects array, which is how I did it before with the lines, but it doesn't work, so I was thinking it would be great if it could be wrapped in a transparent box with the faces pressed against the side and then use the transparent box as the handle for dragging.
Here is the example of it working with wordwrap: https://jsfiddle.net/ajhalls/73dhu192/
Outstanding issues would be dragging the group, and causing it to face the camera from the center of the group, rather than the corner when being dragged. group.geometry.center() I would have thought would work, like it does when it is a single line, but again it has issues.

KineticJS Group .on() event

Yet again, I'm here to ask for assistance, since either I'm stupid or this stuff is not working as noted. I have 2 objects in a group, a Shape and a Textpath, with Textpath being on top of the Shape. I've set up a 'mouseover' and 'mouseout' and if I go from the Shape to the Textpath, it triggers the 'mouseout' event, even though both are part of the same group. I've found a bug report describing this - https://github.com/ericdrowell/KineticJS/issues/603 - is this still not fixed?
I have had the same problem, and am still not sure if it is indeed a bug, or expected behaviour. Anyway, how I solved it was by adding the mouseover and mouseout to just one of the children that 'defines the perimeter' of that group.
So in case of the picture below, which can be seen as a group with two rectangles, a large red one, and a smaller rotated green one. Only add the listener to the red rectangle. Alternatively you could add the listener to the group and set the listening property of the green rectangle to false.

Animate rotated objects with Raphaƫl.js

I'm my current project I need to draw robots and move them around.
A robot is composed of a circle and a box which shows the current orientation of the robot.
My problem is that I when I animate them, the orientation box moves in a strange way because of its rotation...
Here's what I mean: http://jsfiddle.net/zmunB/
Thanks for your help.
Balzard.
This fiddle shows another option. It may not be quite as elegant as rajkamal's solution, but it may be easier to understand if you are not used to working with matrices. You should be able to add features to it at will (notice the 'eye' I added).
Basically, I am just adding the features to a set, and applying the transformations to each element in the set. Kick off the animations by clicking the colored squares to the right. Note that 'Move relative' will make the set move in the direction it is 'looking'.
Please refer this fiddle. http://jsfiddle.net/apUvX/2/ , for transformed movements.
Here in "onAnimation" method of circle, we are transforming the circle's center coordinate to the
rectangles coordinate system using Matrix.x,Matrix.y and assigning the result to the the x,y of the rectangle.

Algorithm to determine the points delimiting the boundaries of a shape -- using javascript

I'm working on a html map maker, and i'd like to offer our users the ability to create shapes quickly by clicking in a zone instead of having them define the shape manually.
First let's have a look at what we're doing for the moment. The user would like to map the area A. What he has to do is click multiple times on each point to define the boundaries of the shape.
I'd like to know is if there is an algorithm that would allow the user to click in the A area and could determine what points to dispose in order to create an near-optimal shape following the shape boundaries - based on the image contrast.
My first idea to handle this was to determine the furthest points up, left, down, right from the clicked point. Set these four points as our starting points. Then for each segment, subdivide it with a new point and move the new point along the vector normal until i hit a contrasted edge.
Of course, there are some limitations to this approach, but here is what i can assume
the shape can be convex, concave, etc...
the contrast should be black against white but to handle possible evolutions the contrast treshold should be configurable.
in the example i've been thinking about above, there would obviously be a limit to the subdivision depth in order not to kill the users machine
If any of you know about such an alogrithm, that would be really great.
Have a look at Region Growing algorithms. This is basically the same as the flood-fill algorithm described above by tokland in the basic case.
This seems like a hard problem (btw, I don't know about a specific algorithm for this). My 2 cents:
Use a flood-fill algorithm, but instead of getting the whole surface, get only the perimeter.
Take a starting point of the perimeter and go in one way; when you detect that the accumulated quadratic error between the virtual segment (current point - initial point) and the real perimeter goes over a threshold, put a point there and start again till you get to the starting point.
The first step seems pretty easy, the second is harder.
You may use an Edge Detection Algorithm (EDA).
In Javascript you may use Pixastic, or roll your own.
After being processed by the EDA, your image gets to:
After that, simply throw any line in any direction from your interior point to the first white pixel, and follow the contour.

How to determine Z-order when drawing in a one-point perspective?

I'm trying to make a simple javascript that draws rectangles on a canvas, then draws the side faces based on a one-point perspective. The problem is, the amount of rectangles and their positioning is arbitrary, so faces tend to overlap in a way that wouldn't happen in true 3D perspective. How can I determine the correct drawing order so that this won't happen?
Here are some screenshots to illustrate what I mean:
Screenshot 1 - The wrong way. In this one, the grouping of red, green, and blue blocks is being drawn in the reverse order of how they should be drawn.
Screenshot 2 - The right way. This is the way that it should be drawn.
What you are looking for is called the Painter's Algorithm that is as long as you don't have any intersecting polygons
Since your screenshots don't work, I'm going to take a wild guess and assume that the problem your having is that drawing rectangles from back to front yields weird overlaps.
One approach to fixing this would be to use simple binary space partitioning. Essentially, expand every front facing rectangle to an infinite plane. Then, split all of the side rectangles where those planes intersect. Then, drawing from front to back should not product overlaps anymore, since the side rectangles will be split wherever any overlap problems would have occurred.
Edit: Ah, now that your screenshots work I don't think that's your problem. Ah well, I'll leave the answer anyways.

Categories