I am developing a HTML5 web application using KineticJS. I read that in KineticJS there are grouping and layering. As far as I know there are no differences between them. Can you tell me the differences?
The basic difference: Groups are containers while Layers are separators.
Group:
A group is a container for shaped objects inside a layer.
For example, a group might contain both a circle and a rectangle.
A group can be manipulated and all elements within that group are similarly manipulated.
For example, dragging a group will simultaneously drag a circle and rectangle contained in that group.
Layer:
Layers are actually separate canvas elements that are stacked atop each other.
This is similar to the way layers work in Photoshop and Illustrator.
Multiple layers are visible simultaneously.
If objects from different layers overlap, the topmost object displays fully (like z-indexing).
Groups are used to contain multiple items so they can be manipulated as a group--like putting circles and lines into a group to create a "stickman". Moving the group will move all the pieces of the stickman.
Layers are used to separate different items--like having a background layer that doesn't change and a top layer where animation is occurring.
Groups are simply group of elements or objects can be stacked in any way normally within a layer.
Layers are different Canvas area that can be added on the stage stacked over each other.
Related
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've followed go.js example (http://gojs.net/latest/intro/layers.html) of using layers and now I want to modify it, so I can assign all groups to the same new layer while keeping the contents of the group in a separate layer. This seems to be working, as I can see, that depending on addLayerBefore or addLayerAfter being called the group overlay is displayed in front or behind the group contents. Now unfortunately, when I set the group layer invisible the group contents also become invisible. This is bad, as my whole idea to put the group and its contents to the separate layers, was in order to be able to add button, that toggle displaying group overlay, while keeping group contents always visible. Is there any way to achieve this functionality?
The easiest way would be to set a group's or layer's opacity to 0, instead of using the visible property of Parts or Layers.
visible has specific rules about hiding other objects, such as a Group's member parts, connected Links, etc. opacity is always only cosmetic.
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.
Despite my best Google-fu, nowhere in the main tutorial or the KineticJS docs does it explicitly state the difference between a group and a layer. Kinetic's "Getting Started" page sort of addresses this--it mentions that layers have special renderers, although I don't quite understand what that means. So do groups not have those renderers? Can groups not be inside of layers? What makes layers (or groups) different than just a parent to a bunch of nodes for organization/transformation?
Essentially, what's the difference between a group and a layer?
Group is simply a collection of KineticJS defined objects within a layer, while each layer is a separate Canvas (or used to be until version 3.x of KineticJS) you can see the difference by adding multiple layers on a stage. Also, in the framework hierarchy, a group is contained inside a layer and not the other way around. So you can display/render multiple groups at one time but not multiple layers (only the topmost one is visible).
I have a rectangle made from svg rect tag and now want to embed a circle into it. I found that svg elements cannot contain child elements or I guess I din get appropriate example. Please let me know is it possible to have one element into another as a child and then too visible. May be with a higher z-index? How is it possible using Raphael?
Just add the circle as a later sibling of the rectange and it will draw over the top. If you want the rectangle to draw over the circle you'd put it after the circle. It's called painters model as whatever you paint last is on top of everything else.
SVG doesn't have a z-index property at the moment although there is a proposal to add it to the upcoming SVG 2.0 specification.
If you want to learn SVG there's an online primer
The SVG group tag <g> seems like the most equivalent to HTML's <div> container tag.
From https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g :
The g element is a container used to group objects. Transformations applied to the g element are performed on all of its child elements.
Permitted content: Any number of the following elements, in any order
If you're interested in creating complex shapes, paths offer a lot of possibility. You get the same persistent state, attribute malleability, and interactivity (click, hover, drag) that the rect and circle primitives have, but with no limitations on region complexity.
As an added bonus, with cleverly selected paths you can morph cleanly from one shape to another. For instance, check this fiddle out.
There are many aids for building complex paths... for most projects, Google's SVG-edit is perfectly sufficient.