I am using Fabric.js to draw some element in a canvas.
I also used clipping section. So the user is only able to see the clipped section.
The issue is, some section is near to the top of the clipping area. So when the user selects that object, then they are not able to see the rotation point.
See this Image:
I have no idea how to changethe position of that rotation point.
Try to use
canvas.controlsAboveOverlay = true
Instead of moving the point. You should have controls visible outside clipping area if they are still on the canvas.
This is not really an answer for "change position of rotating point" is more fore "make the controls visible outside clipping area" but as of now changing the rotating point is possibile only modifing the library and with a lot of complexity.
Related
I was working on a real time whiteboard.
I want to create an Infinite canvas, which can be zoomed using the mouse wheel and panned using drag, using javascript.During the zoom and pan the items drawn on the canvas must also be affected. Is there a was to achieve this without using any external library?
Yes, but it'll take a bit of work. The general idea of what you'll do is the following:
You will need to keep track of the position of the "camera", as well as how close it is to the content - a zoom factor
You will need to attach event listeners to different mouse actions to cause the camera's state to change
When you drag or zoom, you will need to redraw your canvas with the new positions and sizes of all the content. Some math will have to be done to know what the new canvas content is.
There may or may not be certain performance issues you have to address if there's a lot of content on the canvas.
An alternative, possibly quicker approach, but maybe less powerful, would be to not use canvas, and use some CSS magic instead with plain HTML. The basic concept here is that you'll have a 0x0 div as your plane. That div will contain your content, which may include content such as custom SVGs. Each of its children will break out of the div, and will be positioned relative to it. When you drag, you just move the div (through transform: translate()). When you zoom, you just scale the div (through transform: scale()).
Some useful references if taking the second approach:
CSS transform - to move and scale the whiteboard
CSS position - to position content on the whiteboard, and for the general layout
CSS overflow - to crop the whiteboard
The canvas element itself won't be infinite, I guess that's clear enough. What will change when you drag and zoom is the mapping of the real coordinates of your whiteboard elements to the drawing coordinates on the canvas. There's some work to do with detecting the mouse events and doing the calculations for updating the mapping, so there are too many specifics to really put in an answer. But yes of course this is possible without an external library.
Basically canvas could not be set to infinite sized. All you can do is to draw the portion that should be visible in the canvas.
first of all you should store all the points you have drawn to an array.
whenever you pan your canvas , track the offset that you have panned. this offset values can be used to reposition your stored points in your canvas.
eg. suppose you have drawn a line from (50 , 50) to (100 , 100).
let the offsets be {x:0 , y:0}
x , y offsets shows how much x and y distances you have panned in total
then update the points by adding the offsets and redraw
https://github.com/TomHumphries/InfiniteCanvasWhiteboard
here is a simple html5 whiteboard created by Tom Humphries which has infinite zoom and pan.
Is there a way to allow the canvas object to be scrolled beyond content.
Example:
A canvas created with 1000*1000. And Enabled PAN and Zoom on the canvas. Draw a rectangle on the canvas and move the rectangle with mouse to the edge of the boundaries( top,right, bottom, left) it should scroll the the rectangle to the end of the canvas.
Right now my issue is I can drag the rectangle till the browser boundaries. I need to allow the rectangle to drag beyond the content so that I can use the full canvas. I can PAN the canvas to move around the browser.
Thanks
PIXI is just a rendering engine that draws things on canvas. PIXI does not have any mechanics to control canvas position on the web page.
Probably the most efficient way to address your use case is to:
Make canvas fit on the screen entirely (do not extend it beyond the screen bondary, never pan nor zoom canvas as DOM object).
Make "content" PIXI.Container that holds your content (stage -> content -> rectangles), and change "content" container position as needed to scroll the content inside the canvas.
If you insist on manipulating canvas position, you can position it absolutely on the webpage and manipulate it as DOM object.
Whatever approach you take, you will have to detect that drag and drop approaches the edge and do panning manually in your code. There's nothing in PIXI, as far as I am aware, that would facilitate this.
I use hover tooltips in my map. When an area is hovered, I show a tooltip with a small XY shift to the top left corner so that the pointer of the tooltip is not covered by the mouse cursor.
When I move mouse cursor to another area, near its border, like show in the image, the area is highlighted which is under the cursor, not under the square pointer as should be.
What are options to fix this issue? In the ideal way, I would like hover effect to be applied not to the mouse cursor coordinates, but to the coordinates of some other point that is known and changes while mouse is moving.
I once had a similar problem that I tried to solve with a different approach. I wanted to calculate the centroid of the polygon and always place the marker (in your case square pointer) on the calculated position once the user hovers over the polygon.
Main problem I had was that my polygons were concave and had holes in them (you will have the same problem if you are working with country borders) so I found a good algorithm (library) that I used to do this called Polylabel.
You can read more on this topic and how the guys from MapBox used it to solve their label positioning problems on this link.
Although this is not the answer to your question I found that this solution is fast and usable but only if the relation between the zoom level and polygon surface makes sense.
If I wanted to do something like you are suggesting I would first have a default point offset and if that offset goes outside the polygon I would find the nearest point in the polygon coordinates and attach it to that point.
To do these calculations you can use turf.js library. It has the function to return boolean value if the second geometry is completely contained by the first geometry and others that can help you to find the nearest point on the polygon border. I hope this helps!
I am not sure if it is possible. But let's say there are two images, one over another. Then I will have a circle size 100px around my cursor. So when I move the cursor over the image, it shows part of image that is under the front image. So the back image is hidden and visible only if the circle size 100px is over some part of it.
Unfortunately I have no code as I am not sure if it is possible to create.
However, any idea about it?
I would try actually stacking the hidden image above the visible one, then use HTML5's canvas to track your mouse cursor, clip a circular area underneath your cursor, then draw your image above it. This gives the illusion that you're "revealing" an underlying image, when in fact you're really revealing a small portion of an image stacked on top. Repeat this any time the user moves his/her cursor.
Here are some resources you might find useful in coding this:
HTML5 Canvas Clipping Region Tutorial
HTML5 Canvas Mouse Coordinates
Stack Overflow: clearing circular regions from HTML5 Canvas
Using pixi.js to make a 2D game, when the main player dies (because he hit a fox, a car or something else), I would like to zoom on it. The desire effect in mind is kind of the end of a level in super meat boy.
Check it, it's between 19:20 and 19:22 : http://youtu.be/3VKWn41Bqss?t=19m20s
I have a worldLayer variable that is a DisplayObjectContainer. This layer holds every element of the world, so I'm scaling it, like so, every frame :
this.worldLayer.scale.x += GAME.config.dead_zoom_speed;
this.worldLayer.scale.y += GAME.config.dead_zoom_speed;
Now you imagine that this piece of code zooms in direction of the coordinate (0,0), which is the top left corner of the screen. But of course, I'd like to zoom on the player, which is not is (0,0). It can be anywhere actually.
Zooming in on a specific point would be doable if the DisplayObjectContainer had the anchor property ; but it doesn't. This code for exemple, with another lib than pixi, uses this technique : it modifies the anchor (called origin in this fiddle).
So my conclusion is, for zooming on a specific point, I have to use the position of the worldLayer. So for every frame :
scale the world layer
calculate the position of scaled worldlayer so that the viewport (with a fixed size, right) is centered on the main character.
This last point is where I'm stuck. How would you go and calculate the position ? My mind can't get around it.
With this comes the problem of centering without displaying the outer canvas. For instance, if the main character is near the right edge of the screen, it would not be totally centered on the viewport. But that's kind of another problem.
So I'd like to discuss that with you guys : have you ever had to implement such a feature ? how ? Am I missing something in the pixi.js API ?
Regards,