I'm programming a debate-graph with Raphael JS. Users can add nodes to the graph. Eventually the graph gets really big and the canvas is still the same size. the canvas (in raphael js: paper) is inside another div with "overflow: scroll;", so lets ignore screen real estate
Is there a way that I resize the canvas without reloading the page (to assign new X/Y values)?
Alternatively, can I create a second bigger canvas in parallel and copying all the elements over? is there a way?
If I understand your question, just call setSize() to expand the size of the canvas to the size needed as you need it. I've used this in a div with overflow:scroll to get the effect you describe.
In my case, I didn't want to resize, I wanted to zoom.
In other words, show the user the growing graph inside a constant-sized div.
So I needed: setViewBox()
Related
"A stackblitz is worth a thousand words": https://stackblitz.com/edit/angular-zoom-crop-marker
Basically what I'm trying to do is to have a square drawn above a certain position in an image (<img>), and have that dynamically adjust to the image while being zoomed in / out and cropped. The stackblitz link has 3 views, the basic view which is a plain image, a zoomable view (which I got working as well) and a view where the imaged is "zoomed in and cropped" while being zoomable - This is where I need your help.
Should I crop using object-fit in some way? Is it better if I use a canvas to handle this? I've been at this for a whole day I and I feel my css knowledge is too limited to pull this of.
Bonus question: How would I go about to have the zoom-in zoom-out buttons add/remove one image per row using only css flex-box? (ie: not statically adding x pixles in height and width, but rather increase or decrease the size of each image so that another image is removed or added (per row) while always filling up all the available space)
Thank you in advance!
Managed to solve it myself. stackblitz updated with a working solution.
I'm trying to figure out how to have a DIV column snapping to some fixed-size grid, via CSS.
Here's the test page I'm working on: http://mapofemergence.com/test/MoEv2/
What I'm trying to get, is the right div (the green one) someway snapping to the background grid quads: when resizing the browser window, the red quads should distribute in the middle area, while the green column should "fill" the remaining area on the right side of the page, and yet remaining always aligned (on the left) with the grid.
Basically, being a the grid's quad size, the right green div should have a variable width, equal to or greater than a, and anyway minor than 2a (in which case it should set back to a width of a, while having one more red quad moving from the lower row to the upper one).
here's an image to get a better idea:
(sorry, my reputation doesn't allow to hyperlink)
I'm not really sure this can be done via CSS, but I'm sure that some of you can help finding some solution or workaround. I wouldn't use javascript, if possible.
Thanks for your help,
s
Unfortunately HTML/CSS don't have features necessary to do what you want. You can only achieve it by using JavaScript.
You should bind a function to window resize event which will set green's div width to desirable value. In jQuery it should look something like that:
$(window).resize(function() {
$("#rx").width(
parseInt($("#rx").css("min-width").slice(0, -2)) + (
($(window).width() - $("#lx").width() - $("#rx").css("min-width").slice(0, -2)) % $(".module:first").outerWidth(true)
)
);
});
Note that this code can be easily optimised but I wanted to make it as simple as possible.
Recently I worked in a project using Flex. Its a Photo editing project. I have took a Canvas and take a image in that canvas using the code canvas.addChild(image) . Now i can move the image freely by using moving code. The image move inside the canvas and outside the canvas. I want to move the image/child only inside the canvas not outside. How can i do this?
There are two ways to do this:
Bounding Rectangle
Scroll Rectangle (or Mask)
Assuming your "moving code" is something like an Event.ENTER_FRAME handler initialized onClick, you want to make it so the image can't leave the bounds of the parent Canvas.
The first case (bounding rectangle) will allow you to drag the image within the retangle but you will always be able to see the whole image. This is how Image croppers work.
To create a bounding rectangle, you'll have to write a fairly detailed method, but the idea behind it is simple. Just get the bounding rectangle from the canvas, and don't let the image.x go below 0 and don't let image.x + image.width go beyond canvas.width. Same with height. Here's a sample Image Cropper in Flex (and the source). Check out how they did it for details.
The second case (scroll rectangle) would allow you to create more of a pan/zoom like container like you see on this Flex Pan/Zoom Map (here's the source). Also, the large image in the Flex Image Cropper on the right is an example of this second case, but they don't have the dragging. That requires that you manipulate the position of the scrollRect property on the canvas. The scrollRect property is a flash.geom.Rectangle defining the Canvas' "viewport". You then change/update the verticalScrollPosition and horizontalScrollPosition properties, so it's backwards (compared to the Bounding Rectangle).
I think if you set clipAndEnableScrolling to true on the canvas, and you drag a child image around inside of it (and image.includeInLayout = true), it should clip the image to only show up inside the canvas. But I'm guessing you want case 1. Just search those properties and you'll find some good examples on google.
Good luck, should be a fun project.
Lance
I'm working on a JavaScript image resizing feature which rely on the IE only DXImageTransform addon.
Wanting to address modern browsers as well, I gave a shot to canvas, with pretty good results.
However, I face an issue in my resize function, which is the following:
function Resize(oObj, flMultiplier)
{
var canvas = document.getElementById('canvas');
var canvasContext = canvas.getContext('2d');
oObj.style.visibility = 'hidden';
canvasContext.clearRect(0,0,canvas.width,canvas.height); // clear canvas
canvasContext.fillStyle = 'rgba(0,0,0,0.4)';
canvasContext.scale(flMultiplier,flMultiplier);
canvasContext.drawImage(oObj, 0, 0);
}
If my image becomes bigger than the canvas item, then one will see only a portion of the image, which is bad.
I tried to tweak the canvas size at runtime, but if affects the display of the resized image.
So I ended up declaring a big canvas element, which is pretty OK, except that the css overflow of my web page is adjusted on my biggest element, and not on my resized image, which is a pain.
So I guess there are two ways to solve my problem:
Try to exclude the big canvas element from the overflow scheme
Try to update the canvas element size when resizing (I may have missed something there)
I haven't tried that myself, but perhaps you can create a canvas element out of the Dom, with document.createElement. It could be of arbitrary size without disturbing the display.
Now, I lack context (why do you resize images this way instead of using width and height attributes, among other questions) so maybe I am missing the point.
If I have an object in a layout in Flex what is a good way to 'break it out' of that layout to be able to animate it.
For instance I have an image and a caption arranged at an angle. I want to make the image 'zoom out' slightly when the mouse rolls over it. Since its in a layout container is active if I were to resize it then obviously it would move around everything else.
I dont think I can achieve what I want by just setting includeinlayout=false.
Any experience with best practices on this?
My best idea I'm wondering about is making the image invisible and creating another image at the same location by using the screen coordinate conversion functions. This jsut semes clumsy
Wrap your object in a fixed size Canvas so that the layout upstream will remain the same. Then position the object manually within that container and then set its includeInLayout to false. At that point, you could do whatever you wanted with the interior object. Oh, also set clipContent to false. This should work whether you want it to grow or shrink.
If this is an itemrenderer or something that you've wrapped into a class, you could handle all of this in the class definition and make it transparent to consumers of the object. You'd also be able to write a mouseOver function that did what you wanted with the interior object that should zoom.