using Raphael JS to scale a group of elements at once - javascript

I have a simple scene in Raphael JS which contains mainly basic elements, circles, rect, images, etc.
I want to scale up a circle on the mouseover event, which I can do, but I want to add an image over the top of the circle and have that scale as well when the mouse is over the circle OR the image.
Is there a way that I can scale two (or X) items instead of one at a time? Is there some kind of "container" element that I cant find?
Also, when then mouse is over the circle, the event fires, but then when the mouse goes over the image, the mouseout event of the circle fires, how can I stop this so that it looks like the circle and image are one element?

I think what you have to do here is create a transparent circle over the circle/image combination you already have. So, circle,image,circle. The second circle is where you put your event handling. By doing it this way, the top transparent circle will get focus even when it looks like you're hovering over the image.
Stick the lot of them in a set and scale the set in the mouseover. I'd do an example for you, but I'm inherently lazy. If you're really stuck, I'll give it a go.
Hope that makes sense.

Related

FabricJS object coordinates relative to an image instead of whole canvas

I'm trying to create a small website using the FabricJS library, which adds additional features to the web canvas element.
My issue that I, however, have is that i want to resize the canvas (in red) so that it fills the whole webpage.
On this canvas, there is a background image (in green) where I'll create some drawings on (in orange, this could be lines, squares,...).
Now, I would like to export all drawings in a coordinate system relative to the image and not to the whole canvas, because it should be possible to freely move around and zoom in/out the image for an enhanced drawing experience.
My idea, on how to solve this, would be to calculate the image position relative to the canvas and subtract them from the drawings - but that includes a lot of calculation.. Maybe there is a more genius approach with FabricJS?
Moreover, how can i guarantee that my drawings move around and zoom in/out with the image, so that my drawings are always true to the image?
I've thought about this for days and came to the realization that i need input from the professionals.
I think toLocalPoint() might help. Given an object imageObj and absolute coordinates left and top of your drawing, you can find the relative coordinates like this:
const abs = new fabric.Point(left, top)
const rel = imageObj.toLocalPoint(point, 'left', 'top')
console.log(rel.x, rel.y)
As for your second question: there is no easy way to "tie" two objects together, other than grouping them - and I assume you don't want to group them. Therefore, you would need to listen to all the appropriate events emitted by one object and make the adjustments to the other object in their handlers. To find out what events make sense to listen to in your case, see the events demo.

Rotate a resized rectangle with SVG and Javascript

I'm using d3js and SVG to resize and rotate rectangles, I capture the mouse events on handles that are positioned in each corner of the rectangle, there are two handles in each corner, one for resizing (square) and other to rotate (circle).
When I do the following process, the rectangle "jumps" from its location to another one:
Rotate (it means it's not more in zero degrees)
Resize (any direction)
Rotate again (here is when the shape "jumps")
The jump only occurs when the center of the rectangle is updated, using transform rotate from SVG.
One thing that gave me a lead was updating the rotation center while the shape is being resized, when I do this the shape starts to move to the final position where the "jump" would have placed it.
I can post code examples, it will take some time to do, but if helps to see the problem, no problems.
All I need is some direction from someone that already had this problem.
Edit:
I've made a Plunker with somewhat the current structure that I'm using in my project. All events controls are concentrated in the svgApp.directive.js.
Things I've noticed while developing this example:
The center of the element is not correctly calculated after the angle is not zero, this is my main issue;
If you apply the {{vm.model.image.transform.rotate}} to the ng-attr-transform attribute in the center <circle> element, you are going to notice how it always is in the correct center (the right circle - blue - is commented at the bottom of the main SVG);
I know this is not the perfect version of the tool, it still has some bugs, like the inversion of the mouse direction (resize/rotate handles) while rotated, but it's well documented and structured very close to how I'm working on the project.
The Plnkr: http://plnkr.co/edit/fXT0kZcRwJTPb7wQVHpg?p=preview
Any help with this problem will be very appreciated.

drawing circles on a map while the user is scrolling

I would like to build a very similar (duplicate) as this one. Just the first part where circles show up on the map. Any ideas where I can start? Any jquery plugins that do this?
https://www.airbnb.com/annual
If there aren't any plugins can you give guidance where I should start? Any examples are greatly appriciated.
Just bind an event handler to the scroll event. Get your position from $(window).scrollTop(), and with this information draw and/or resize your array of circles as needed.
There are ways to get the effect on the site without Canvas. You can use position:fixed divs with high border-radius to create circles, and you can resize them and reposition them with JQuery. You can also use SVG, with which you can create an array of all the circle objects at radius 0 initially and increase or decrease the radius with the scrolling effect (or your data set). If you do use canvas, you may need to be prepared to re-render the entire canvas on every scroll tick, since it will be difficult to get the circles to "shrink" otherwise. This will probably make your scrolling choppy, just as it is for me on the site.

How to detect if a shape was clicked (HTML5 canvas)?

I am drawing different shapes like rectangle, triangle, hexagon etc. using the canvas and lineTo method like in this blog. I just want a simple way to find if I clicked inside a shape. I can do it by filling the shape with some color and the checking if the point I clicked has this color but I don't want to use fill color method. Is there any other way to do it?
Also found isPointInPath but it did not work.
Check in here:
Javascript check Mouse clicked inside the Circle or Polygon
meouw answer works for sure I've test it and guarantee it works.
It seems that there are some other solutions, too that have been upvoted,
maybe you can try them, either
You could either try some canvas frameworks like http://kineticjs.com/ (check events section) which support already clickable elements out of the box or you'll need to write two functions, one which gives you your relative mouse click coordinates inside the canvas element (I used the one described here: https://stackoverflow.com/a/5932203/532102) and after write another function which checks if the returned mouse coordinates intersect with your shape on the canvas.

html 5 canvas events

I want to know if we can select a thing on canvas through our own menu say rectangle and then click on the screen again to get it's coordinates and draw rectangle there? So is this possible by any event or any thing to first select rectangle then wait for a click so that rectangle is draw at that position on screen?
This library lets you add events to the drawed things on your canvas Kinetic. I suggest you take your menu outside of the canvas, it's recommended to use "old elements"(divs) when posible.
Maybe this example will help you out. http://forvar.de/js/mcl/examples.interactive.html

Categories