I am able to generate the raphael diagram , but it is exceeding the specified width and height of the Raphael canvas.
How can i add a scroll-bar to the Raphael canvas to accommodate the entire diagram within the given width and height of the Raphael canvas?
Are there any other ways or workarounds to handle the above case?
Please help. Thanks in Advance.
I was running into a similar case, and I found a way that works, although it's a bit kludgy. My first try was setting a height and overflow:auto on the container div, along with setting the Raphael paper height to 100%. However, this didn't work; it appears that if you set the paper to 100%, it grabs the height of the div as it is before the chart is inserted, so that's no good.
However, a workaround is to do the following, assuming that the container div has an id of "holder", that I need the scrollable area to be 100px high, and that the Raphael paper object should be 800px wide:
var paper = Raphael('holder', 800, '100%');
// add your graphics to the paper object here
var height = $(paper.canvas).outerHeight();
paper.setSize(800, height);
$(paper.canvas).parent().height("100px");
I used jQuery to get and set the heights, but you could do that however you wish. The important point is to not set any restrictions on the height until after you've already created all the Raphael objects, then set the height of the paper object and the containing div to whatever you wish.
Note that if you simply want everything to show up, and don't need to fit the graphic into a specific height using scroll bars, you can just pass 100% as the height to the paper constructor, and forget everything after the first line of the sample above.
Related
I am using Fabric JS to allow the user to have an interactive experience on my React app. Is it possible to apply a frame around a Fabric JS that is taken from an image? For instance, if the canvas is 400x400 px I can resize an image of a frame that is transparent in the middle to 410x410px and apply it on top of the canvas for the user to see? I have attached two images for reference.
Edit: This is the code I am using for zooming in
const zoomIn = useCallback(() => {
// Get original height of canvas
const canvasDimensions = getInitialCanvasSize()
let zoom = HTML5Canvas.getZoom()
zoom += 0.2
if (zoom >= 2) zoom = 2
HTML5Canvas.setZoom(zoom)
HTML5Canvas.setWidth(canvasDimensions.width * HTML5Canvas.getZoom());
HTML5Canvas.setHeight(canvasDimensions.height * HTML5Canvas.getZoom());
}, [HTML5Canvas])
There is no option for canvas's border in fabricjs canvas docs
But you can still achieve this easily using following steps.
PART 1: Creating the Illusion of border
CSS Method
First one can easily create CSS border around the canvas.
Best way to do this is to create div around canvas, as fabricjs split canvas in 2 while running.
You can create slider to control width and color/image for div's border.
This will looks like exactly your second image with customization.
OR
Another Canvas Method
Behind current canvas put this second canvas and control its width and image.
I don't recommend this one, as this will make it more complex to implement.
PART 2: Making Illusion real
If you used CSS METHOD
Now you get what your canvas looks like. You have width of border, image/color of border.
Steps:
Create new canvas (lets' call it 2nd Canvas) of 410px if canvas's width 400px with border of 5px.
Export main canvas as image and put it over 2nd Canvas. And now you can export this as final image.
For 2nd step check my answer on this stack
If you used Another Canvas Method
Directly follow above 2nd step
Export main canvas as image and put it over 2nd Canvas. And now you can export this as final image.
For 2nd step check my answer on this stack
My diagram has elements of fixed size. For example I have couple elements with different sizes: First is 250x200px, second 307x501px etc.
There are lot of panels, shapes etc.
Is there any way to resize/rescale every element on current diagram?
For example I want to double every element size so I would like just multiply it by 2.
diagram.scale = diagram.scale * 2; //resize elements like 250px X 200px to 500px X 400px
I've read about scale and resizing from documentation but scale does not seem work.
I am not attaching any code because it is generic question.
I would think that would work (to double the Diagram's scale) but that isn't exactly resizing elements.
You can programatically go over all nodes:
myDiagram.startTransaction();
myDiagram.nodes.each(function(node) {
node.scale = node.scale * 2;
});
myDiagram.commitTransaction();
Or else resize them by setting their width and height, or setting the width and height of some element inside the node.
Maybe related depending on what you are trying to do: This tool extension demonstrates how to modify the ResizingTool to work with multiple selection: https://gojs.net/latest/extensions/ResizeMultiple.html
I want to use CSS transforms to do some layouts of images, and have the image layouts be consistent across different screen widths. (For the purposes of this post, I’m only going to discuss widths and x (left) values.) All the data that I need to do these layouts are in a database.
Of course, if I could do an HTML layout with dedicated styles for each layout, I’d be fine. I could do it like I have it here in this pen. There are three boxes, 2 smaller ones and a larger one that is 3 times the size of the smaller ones. The smaller boxes are each 10% of the window width, the larger one is 30%. The boxes are equally spaced, the left-most one is 10% from the left, the larger middle one is 30% from the left and the last one is 70% from the left. This leaves an equal amount of space ( 10% ) between the boxes.
img#smallA { /* CSS for the first box */
position: absolute;
top: 10%;
left: 10%;
width: 10%;
}
The spacing is uniform when using CSS only.
On the above pen that uses CSS only, you can resize the window width all you want and the sizing and spacing stays consistent; proportional to the screen width, just as we have coded it to do.
So it seems logical that one should be able to do the same thing with a transform. You can get the window width with JS, you can set the width of the boxes with the transform and you can set the x values with the transform. But here’s the pen where I’ve tried to do it. Click the larger box to run the sizeAndPos() function. Now if you resize the window width to 1000 pixels (watch the little gizmo in the center of the CodePen screen), this JS / transform method works perfectly and the layout looks like the other one. But if you stretch it, the spacing starts going off immediately. (Remember to click the larger box after resizing). I think the reason it works at 1000 pixels wide, is b/c at that window width, the boxes are at their natural width. But I don’t understand why it only works in that case.
The spacing is off now; the between gap box 2 and 3 is too big.
For anybody how looks at the code, you may wonder why I’m passing the original width of each image (origWidth) to the function. This is because the CSS scale transform function sizes the image based on it’s original dimensions (scaling an image to 1 gives you 100% of the original size). So to do a proportional size, you first have to figure out how many pixels wide the box should be (10% or 30% of the screen width, depending on the box). Then you have to divide that amount by the original size to get the proper ratio to do the scaling. The small boxes are 100 pixels wide and the large one is 300 pixels wide.
Surely this is possible with transforms. I have tried setting the transform properties individually, to control the order of the operations, but it didn’t help. Can anyone tell me why this doesn’t work?
After trying to make this way too complicated, I found the answer. Change the transform-origin property of the elements. The default on this property is 'center' both axis. But we need our transformations to originate from the top left corner.
img#smallA {
transform-origin: left top;
position: absolute;
}
I am using Raphael JS, and create a canvas with width set at 100% of the container like so...
// there is a `div` with id `paper`
paper = Raphael('paper', '100%', '100%')
paper.circle(50, 40, 100)
Now I want to know how big the canvas is. how can I reliably find out the canvas size on all platforms?
I am not using jQuery.
Update: Potential workaround
Bonus points will be awarded for a solution that makes getting pixel width unnecessary, by making cavas scale proportionally. I am fairly sure this is possible with canvas so assume it is possible with Raphael, so that if I create all elements to a set width (say 100 pixel wide canvas) then I should be able to scale the canvas to 100% of the screen, and the canvas should fill the screen, with all elements stretched appropriately, and keeping their proportions.
You can use the viewbox in order to scale to fit in full screen mode.
http://raphaeljs.com/reference.html#Paper.setViewBox
You define a physical region (x, y, width, height) that contains your svg data, and everything will be scaled up while maintaining the proportions. The viewbox region is upscaled proportionally (when you specify false for fit) to the maximum size it can be inside the container.
paper.setViewBox(0, 0, 100, 100, false);
Unfortunately, Raphael doesn't seem to give you the option of specifying how the overflow is handled. For example, you might wish to centre the view box so that any excess is spread evenly. If you have a 100 x 200 container and you have a 100 x 100 viewbox, then you have 100 pixels in height below the upscaled viewport, when you may wish for the viewport to have 50 pixels above and 50 pixels below.
In SVG these options are defined on the SVG container's preserveAspectRatio property. If you are not supporting the VML (lte ie8) option then you could change this property to affect the alignment.
http://premsobel.info/notes/ml/svg/viewports.html
As for detecting width and height in general, you are better off detecting the width or height of the parent node using element.clientWidth and element.clientHeight. I tend to avoid using body as the parent node and add my own inner container for detecting the size. Your canvas is 100% width/height of some container, so I would go looking for that container to find out what size it is.
I am working with a copy of http://www.rgraph.net/demos/bar04.html in which the canvas has no height and width specified in its attributes, but set in CSS to have height and width of 100%.
At present the rendered image looks like it was graphed crisply at a low resolution and then blown up; the screen has the same sort of fuzziness you'll get from zooming too far in on an image in a browser.
Is there any way to adapt and configure RGraph so the image is crisp when the graph fills a screen?
Changing the size of the canvas with CSS will just scale it rather than change the innate resolution. To change the resolution set the width and height properties of the canvas. You can either do this in the markup, or you can set it in script:
var cvs = document.getElementById('cvs');
cvs.width = 1200;
cvs.height = 500;
As well as hard-coding the values you could determine the window size when the page has loaded (eg with jQuery) and then set the width/height attributes to that.