Is it possible to create two layer independent layer masks on the same canvas? I've tried, without much success. I suspect it's due to masks affecting layer indexes.
I've highlighted this by enabling masking on mouseover (see here). If you mouseover a layer mask, the other layer masks disappears. If you draw the layer with mask:true as a property only one layer mask will appear. You might be thinking "why not make a separate canvas for each layer mask?" I can't because I intend on using $("canvas").getCanvasImage(); to render the canvas as a composite jpeg (which would be difficult with two canvases).
The end goal would be a canvas split vertically into two panes. Each pane would be filled with an draggable image. Users would move the image in the pane to "crop" it and then render the result as a composite image. This example comes close, but dragging the green box under the right pane creates a deadspace in that pane.
Thanks for you assistance.
Yes, it's now possible with jCanvas. Just be sure to call the restoreCanvas() method whenever you wish to restore a mask, like so:
$("canvas").restoreCanvas({
layer: true
});
Here's an example I made which uses two masks to split the canvas into two panes.
Related
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.
I am trying to figure out a way to draw an outline around the area of a group of items as illustrated hopefully clearly in the sample image.
The idea is a user creates a bunch of rectangular objects always adjacent (vertically/horizontally), groups them together and then clicks a button to create the outline. I cannot figure out the outline part.
My only idea so far is to perhaps export the group to SVG and then manipulate it somehow (eg. add a thick border and use a clipPath to keep only the outer part of the border). Not even sure this idea is right because my SVG knowledge is kind of limited. Perhaps this can all be done in the context of fabricjs or with the help of an additional library?
(Using fabricjs 3.6.3)
Sample of outline around drawn area of objects
Scenario with group of objects where an object is in landscape position
I know you can layer canvases on top of each other just as if you were making an image in Photoshop but are you able put canvas objects above and below each other or side-by-side?
I'm looking to draw a graph which allows you to choose a space and depending on what color choice you have it'll change the block based on that choice.
Here's my thought:
Canvas #1 - Draw Graph Paper
Canvas #2 - Right side of Canvas #1 - Tab that has 4 color choices. I'd figure out the x-y of these to grab the color based on the color image. Canvas 1 block color would reflect this choice.
Is this a good way of going about this implementation?
Yes you can place canvases above, below and side-by-side each other. A canvas is an HTML element and can be positioned like any other using CSS.
I'd probably try to avoid using a canvas for your color choice tab unless it's absolutely necessary for some reason you haven't mentioned. If you use standard DOM elements instead you'll be able to bind to the click event directly rather than having to figure out the mouse position relative to graphics in your canvas.
Here are some good reasons not to use canvas to create UI components.
All, We have a shape made of paths (lets call this parent), on which a user can drag & drop different objs.
We are using clip-path to hide the obj., i.e. if it goes beyond the boundary of the parent shape, it gets hidden.
Inside the parent shape, user can drag & drop obj. We fill these obj. with images. If the images are bigger than the obj. then part of the image outside the obj. boundary is also hidden (clip-rect of Raphael).
Unfortunately, Raphael doesnot appear to like multiple clip-path & we get a conflict, i.e. the obj. with image inside get its clip-path functionality overwritten by the parent shape clip-path; the images become visible outside the boundary of the obj.
EDIT: Here is an illustration of what we want to do. Hope this further explains via illustration.
I think I might have a partial solution for this..
If you find it relevant please send me feedback on my website
Go to the index on my website and look at the "Thought Cloud"
It consists of a large path area with the "Thought cloud" cutting a hole through the larger path area.
My site is at
http://www.irunmywebsite.com/
/UPDATE 8TH April 2013/
Multiple clip path is just as possible (Uses the same principal) as single clip path in Raphael
Single clip path Example
Donut hole
Multiple clip path Example
Here we clip 9 images twice! The clip path overlay makes the images have rounded corners
I hope this helps, formatting this reply on IPod so spelling and other things maybe a bit off..
I'm working on an app that displays a large image just about the same way as Google Maps. As the user drags the map, more images are loaded so that when a new part of the map is visible, the corresponding images are already in place.
By the way, this is a Javascript project.
I'm thinking of representing each tile as a square div with the image loaded as a background image.
My question: how exactly can I calculate what divs are showing, and when the tiles are moved, how do I tell when a new row of divs have become visible?
Thanks!
About calculating what divs are showing: learn the algorithm for intersecting two rectangles (the stackoverflow question Algorithm to detect intersection of two rectangles? is a good starting point). With that, the divs that are showing are the ones whose intersection with the "view window" is non-empty.
About telling when a new row of divs have become visible: you will probably need a updateInterface() method anyway. Use this method to keep track of the divs showing, and when divs that weren't showing before enter the view window, fire a event handler of sorts.
About implementation: you should probably have the view window be itself a div with overflow: hidden and position: relative. Having a relative position attribute in CSS means that a child with absolute position top 0, left 0 will be at the top-left edge of the container (the view area, in your case).
About efficiency: depending on how fast your "determine which divs are showing" algorithm ends up being, you can try handling the intersection detection only when the user stops dragging, not on the mouse move. You should also preload the areas immediately around your current view window, so that if the user doesn't drag too far away, they will already be loaded.
Some further reference:
Tile5: Tiling Interfaces
gTile: Javascript tile based game engine
Experiments in rendering a Tiled Map in javascript/html…
There's no reason to implement this yourself, really, unless it's just a fun project. There are several open source libraries that handle online mapping.
To answer your question, you need to have an orthophoto-type image (an image aligned with the coordinate space) and then a mapping from pixel coordinates (i.e. the screen) to world coordinates. If it's not map images, just arbitrary large images then, again, you need to create a mapping between the pixel coordinates of the source image at various zoom levels and the view-port's coordinates.
If you read Google Map's SDK documentation you will see explanations of these terms. It's also a good idea to explore one of the aforementioned existing libraries, read its documentation and see how it's done.
But, again, if this is real work, don't implement it yourself. There's no reason to.