I have a question about Draw2D.js. I'm resizing the Canvas by using JQuery-ui, but when I resize the canvas I have to destroy it and create a new one ... Otherwise I'll have many canvases overlapping. If I call canvas.destroy() nothing works (as mentioned in the documentation).
There is any way to do a soft destroy of the canvas? Is any resize fuunctionaility in JQuery-ui?
Thank you #MacGyver, i find solution in the second propostion. We have
to edit the SVG DOM :)
i share my solution here jsfiddle!
it may helps!
You should be able to dynamically change your DOM node of your canvas, by setting the width and height manually. Here, we have a width of 2500px and a height of 2500px.
<div onselectstart="javascript:/*IE8 hack*/return false" id="draw2d" style="width:2500px; height:2500px;-webkit-tap-highlight-color: rgba(0,0,0,0);"></div>
canvas.setScrollArea("draw2d");
Or change the width and height of the DIV tag dynamically using JavaScript.
Another alternative is to set the zoom dynamically:
canvas.setZoom(1); // default 1x (1:1 zoom)
canvas.setZoom(.5); // .5x (1:2 zoom)
canvas.setZoom(2); // 2x (2:1 zoom)
Then call the app.layout() function
Reference:
http://draw2d.org/draw2d_touch/jsdoc/#!/api/draw2d.Canvas
Related
I am attempting to resize a canvas chart when a user resizes their browser window. The problem with changing it directly, or so I've found...is that the image disappears during the resizing. Here are some screenshots to help you understand my problem.
This is the chart before resizing.
This is the chart during the resizing. (without targeting the DOM element)
I've identified the chart overflowing on the right hand side.
Chart being resized and targeting the canvas width.
As you can see, the chart disappears.
let canvas = document.getElementById('canvas');
this.canvas.width = ${
event.target.innerWidth - (window.innerWidth / 100) * 2
};
Please let me know what options I have for dynamically resizing canvas charts. Thanks!
P.S. I'm using AngularJs for this particular project.
Update 12/30/2020
Discovered that the obvious reason for the chart disappearing is that the canvas is based on coordinates which originate from a set height/width. So the solution was re-mapping the strokes/fills as the canvas is resizing.
New challenge:
Using clearRect (0, 0, width, height) doesn't clear the canvas. Re-mapping results in an inifite mapping of charts on top of one another. As shown in the photo below.
Is this the solution I get paid a million dollars for? No. But...
After hours of spinning around thoughts as to why the creators never made an easy solution for resizing a canvas, I've finally found an option that works for resizing the charts. Note that if you're scaling up that it can become pixelated. But this option will work.
Instead of defining the height and width with the inline properties:
<canvas id="canvas" height="200" width="600" (window:resize)="onResize($event)"> </canvas>
You should use css to make the height and width 100%. This turns the canvas into an image essentially. Which is why it pixelates when you scale up. The next step is to setup functionality or styling for the element that the canvas is embedded within. This is where the solution arises. Because you can't adjust the canvas without losing the graphic. You have to adjust the element that encapsulates it!
Ex:
<div id="area-chart">
<canvas id="canvas" (window:resize)="onResize($event)"> </canvas>
</div>
You would dynamically adjust the height and width of the #area-chart. I personally suggest using viewport width to define the height as it is the most flexible in terms of scaling and the graphic pixelates far less than using other measurements (%, px, pt, etc.). Of course your needs may be different than mine, but here's some sample styling.
Sample scss:
#area-chart {
#canvas {
width: 100%;
height: 10vw;
}
}
Chart on load:
Chart scaled down:
Chart scaled up:
** note that the pixel dimensions in the screenshots are the full window size and not the size of the element
I've got a zoom button in my application which scales the children of a container using scaleX on each child.
But this makes the content extend beyond the canvas width. So I would need to additionally change the canvas width, but that seems to generally scale the canvas and the content - if I use...
$('canvas').width($('canvas').width() * 2);
...which I don't want. I basically just want to set a new width.
Any advice for this?
Thanks in advance.
The JQuery width method sets the width using CSS, which will stretch the canvas instead of setting its pixel dimensions. From the docs:
Set the CSS width of each element in the set of matched elements.
Instead you can access the canvas element and set it directly, or use the attr method.
// Direct
var elem = $("canvas").get(0);
elem.width = someValue;
elem.height = someOtherValue;
// Or using attr
$("canvas").attr("width", someValue);
Hope that helps!
When i'm setting the canvas width and height with css, the pen is beeing shifted. After zooming in/out in the browser (chromium), the pen isn't shifted anymore.
I'm using the literally canvas widget and want to fit the canvas to its parent div. After initializing the canvas, i'm setting the width/height of the canvas with the jquery css function. But my pen isn't at the same coordinates. After scrolling in or out in my current browser, the pen is at the coordinates where my mouse pointer is. Can anyone help me?
$('.lc-drawing').find('canvas').css({'width':containerWidth, 'height':containerWidth});
With canvas you usually find you need to actually set the width and height attributes normally, rather than css/style width and heights.
My example with your code shared would be to try:
$('.lc-drawing').find('canvas').attr('width', containerWidth).attr('height', containerWidth);
Can you also confirm you are intending to set "containerWidth" for the height and width of the canvas?
Regarding resizing the canvas, consider adding some responsive CSS like this, to maintain the position values, but resize for mobile.
canvas {
width: 100%;
height: auto;
}
You will still need the width and height attributes on the canvas itself though.
I need to apply zoom to the javascript canvas which I have badly accomplished by using the following line of code:
ctx.scale(2,2) //doubles everything's size
Instead of zooming, its obviously doubling the size of the canvas and all of its elements. I'd be okay with this if I got it working like the image below shows:
Any ideas on how I could accomplish what is depicted in the picture above? I'm not using any external libraries hence making this so difficult. Thanks.
You can translate the context by half the canvas size using ctx.translate()
EDIT :
var zoomfactor = 2; //set whatever you want as zoom factor
ctx.transform(zoomfactor,0,0,zoomfactor,-(zoomfactor-1)*canvas.width/2,-(zoomfactor-1)*canvas.height/2)
I am looking for a way to capture the complete canvas (including elements that are moved outside the canvas) to an image. I am using the KineticJS library and I am aware of the toDataURL function. The problem is that the image is clipped to the canvas bounds.
As a workaround I thought to copy all elements on the canvas to a temporary hidden canvas which is big enough to fit all elements and then use the toDataURL function. I was wondering if there is a cleaner approach?
Interesting problem. I like the temporary canvas idea. Also, you could just resize the main canvas, apply an offsetting translation to all child elements, capture the image, then reverse-translate and resize back. This wouldn't be any more complex than copying to a hidden canvas. Plus, the single canvas approach would be more memory efficient.
Just my 3 cents.
I would agree with Alvin, you could just resize the canvas, here's how:
stage.setWidth(window.innerWidth); // inner width of your window
stage.setHeight(window.innerHeight); // inner height of your window
stage.draw(); //redraw
This would resize your stage to the width and height of your window, but this would not account for the possibility that elements would be farther than your window, but you can just modify the number inside the .set functions to account for the farthest right/left one.
If you were looking for a quick way to copy all elements in your canvas to another stage you could serialize it:
var json = stage.toJSON();
var newStage = Kinetic.Node.create(stageJson, 'newContainer');