Based on my test results, it is not possible to set the same z-index of different objects in Fabric.js using:
canvas.moveTo(object, index);
object.moveTo(index);
I would like to know if there is a solution to do above feature and set z-index is greater than the numbers of objects like CSS z-index property.
Related
I am looking for a way to determine the actual value of attributes such as fill or stroke of elements contained in an SVG (path, circle, ...). I know of several ways to parse an SVG and access direct element attributes, but I can't find an easy way to determine the value of an attribute as it will be displayed taking into account cascading styles and xlink:href references.
The method window.getComputedStyle applied to the element does exactly that!
I have a custom infinite scroll list of Unsplash images, each item has a dynamic height. I want to use two lists under one outerElementType to keep the shuffled layout, how can I achieve it using react-window or react-vizualaized libraries. I attached an example of what I want. I can't use VariableSizedGrid as it makes cells equal. Thanks!
I did not know, this layout is called Masonry layout which is supported by 'react-visualized' example
Is it possible to specify particular layers/elements when using toSVG ?
I have a canvas with both an overlayImage and a backgroundImage, and I would like to extract the svg for every other element added to the canvas.
So far my only solution was to set opacity to 0 for both background image and overlay image then apply toSVG, and finally restore opacity to 1, but I assume there probably is an easier way to achieve this.
Yes you can set "excludeFromExport" property on overlayImage and backgroundImage for exclude from toSVG, toJSON
excludeFromExport
Basically creating a webpage with a dropdown menu I wrote following a tutorial. My page layout consists of 3 separate tables which include 1 for the title/banner, one for the drop down menu and one for the body/content.
The problem I am having first off is that when I scroll over my drop-down menu it drops behind my body/content table. I found a fix for this which was to include z-index:-1. This worked perfectly in IE but after testing it in chrome it prevented links and iframes to be interacted with on the content/body table.
#bodytable {width:1100px;
height:100%;
margin:auto;
position:relative;
top:10px;
z-index:-1;
}
The entire .css code can be found here:
http://pastebin.com/T97JAjQ8
Try giving them each a positive z-index value. Obviously the higher numbes will be "on top" of the other with lesser value. Instaed of giving a table "-1", give it something positive, like 10 and make the dropdown menus "20". You can even set the z-index of the body, to 0 as a baseline.
I haven't confirmed this, but it could be that chrome doesn't like negative z-index values.
Giving Negative z-index makes your element to go under body or wrapper div and hence, prevent them to be interacted because the body element is on the top of that table when you click the event occurs on the body tag not table tag. You have to give positive z-index value. Default stack order of elements is determined the position where the element is defined. For example, your table will be have a larger z-index value if it is defined after menu div. You can fix your problem by changing only the current stack order. By just changing that negative value to positive.
element {
z-index:1;
}
The above code will set the target element to be on top of others beside the current stack order.
I have a set of dynamically created svg objects. Some of them have rather complicated transformations applied to. I mean this is meaningless that I want to calculate maximum and minimums of X & Y of these objects. I want viewbox (or any similar tag that may be useful) to show all these objects without engaging me in calculating extents of drawing objects.
Could you please help?
Thanks
You can use getBBox() on the path element to get the extents of your drawing.
var clientrect = path.getBBox();
var viewBox = clientrect.x+' '+clientrect.y+' '+clientrect.width+' '+clientrect.height;
You can then set the viewbox to these co-ordinates.
n.b. i think you can change the viewbox of an svg after it's rendered so you may have to re-render the svg.