I m using fabric.js in one of my projects.
I m using zooming functionalities . I would like to know if there a simple way to zoom all the canvas (with all the elements ) in on click.
Try out this jsfiddle demonstrating zoom onclick of a button: http://jsfiddle.net/cmontgomery/H7Utw/1/. In essence you get all objects on the canvas and scale/move them by the same factor, giving the visual appearance of zoom.
var objects = canvas.getObjects();
for (var i in objects) {
var scaleX = objects[i].scaleX;
var scaleY = objects[i].scaleY;
var left = objects[i].left;
var top = objects[i].top;
var tempScaleX = scaleX * SCALE_FACTOR;
var tempScaleY = scaleY * SCALE_FACTOR;
var tempLeft = left * SCALE_FACTOR;
var tempTop = top * SCALE_FACTOR;
objects[i].scaleX = tempScaleX;
objects[i].scaleY = tempScaleY;
objects[i].left = tempLeft;
objects[i].top = tempTop;
objects[i].setCoords();
}
canvas.renderAll();
If you use zoom with fabricjs without modifying all objects use: https://github.com/wojtek-krysiak/fabricjs-viewport.
Example: http://wojtek-krysiak.github.io/fabricjs-viewport/
Related
Using NeutralinoJS, how can start the app right in the center of the screen?
It should look like the splashscreen of any app. Unlike ElectronJS, Neutralino's window options doesn't seem to have a center() method.
I made a simple javascript function by using native API of neutralionJS. Used Neutralino.computer.getDisplays() to height & width of the screen along with Neutralino.window.getSize() to height & width of the window and Neutralino.window.move(x,y) to center it. Note: x,y is the coordinates of the top right corner of the window. For a better explaination I have also attested a img demostrating it.
async function centerWindow(){
let display = await Neutralino.computer.getDisplays();
const displayHeight = display[0].resolution.height;
const displayWidth = display[0].resolution.width;
let window = await Neutralino.window.getSize();
const windowHeight = window.height;
const windowWidth = window.width;
const x = (displayWidth - windowWidth) / 2;
const y = (displayHeight - windowHeight) / 2;
Neutralino.window.move(x,y);
}
centerWindow();
Image link
The black dot is actual center of screen, red dot is where Neutralino.window.move(x,y) takes you too.
I'm currently coding in Haxe with Heaps and was checking on how to display text. One thing I want to do is give different font sizes to different texts. Naturally, I declared two Font instances and resized one of them. However, both texts are resized and I cannot manage to have them resize independently. How should I resize font sizes in Heaps?
class Main extends hxd.App{
override function init(){
var font : h2d.Font = hxd.res.DefaultFont.get();
var font2 : h2d.Font = hxd.res.DefaultFont.get();
font2.resizeTo(23);
var tf = new h2d.Text(font);
var tf2 = new h2d.Text(font2);
tf.text = "Hello World\nHeaps is great!";
tf.textColor = 0x00FF00;
tf.x = 100;
tf.y = 100;
tf.textAlign = Center;
tf2.text = "Hello World\nHeaps is great!";
tf2.textColor = 0x00FF00;
tf2.x = 300;
tf2.y = 300;
tf2.textAlign = Center;
s2d.addChild(tf);
s2d.addChild(tf2);
static function main(){
new Main();
}
}
The approach taken does not work because DefaultFont.get() caches the result.
You could either:
Copy the second font by doing var font2 : h2d.Font = font.clone() so that it gets its own properties.
Adjust scaleX and scaleY of Text.
I am a fabric.js novice, I have got through a great deal of documentation and code samples, but still can't figure out how can I achieve such simple goal.
I start from a DOM canvas, and would like to obtain a downsized canvas, using the lanczos filter.
var canvas = /* a DOM canvas, obtained through prior processing */
var width = /* target width, smaller than source canvas width */
var height = /* target height, smaller than source canvas height */
I create the filter:
var filter = new fabric.Image.filters.Resize();
filter.resizeType = 'lanczos';
filter.LanczosLobes = 3;
I calculate the scaling:
var scalingX = width / canvas.width;
var scalingY = height / canvas.height;
Now it is not clear to me how can I apply the filter to the canvas, and get the downsized canvas.
Or could someone suggest another javascript library or function, as simple as possible, to perform a canvas-to-canvas lanczos downsize?
Refer to the code below, the position of the bounding box is not the actual render position of the group of the elements.
The group element can be used to construct a very complicated unit like a Tank / Ship with cannons.
And group element doesn't have X or Y property to help move the inner elements so I have to use the transform to move the Tank / Ship.
However, I realized that when I translate the group, the bounding box never reflect the real render position any more, does any one have any idea how to get the actual render position of the group?
http://jsfiddle.net/k4uhwLj4/
var root = document.createElementNS("http://www.w3.org/2000/svg", "svg");
root.style.width = '500px';
root.style.height = '500px';
document.body.appendChild(root);
var g = document.createElementNS("http://www.w3.org/2000/svg", "g");
g.setAttributeNS(null, 'transform', 'translate(50, 50)');
root.appendChild(g);
var r = document.createElementNS("http://www.w3.org/2000/svg", "rect");
r.setAttribute("x", "50");
r.setAttribute("y", "60");
r.setAttribute("width", "100");
r.setAttribute("height", "110");
r.setAttribute("fill", "blue");
r.setAttributeNS(null, 'transform', 'translate(50, 50)');
g.appendChild(r);
var c = document.createElementNS("http://www.w3.org/2000/svg", "circle");
c.setAttribute("cx", "150");
c.setAttribute("cy", "140");
c.setAttribute("r", "60");
c.setAttribute("fill", "red");
g.appendChild(c);
var bbox = g.getBBox();
var o = document.createElementNS("http://www.w3.org/2000/svg", "rect");
o.setAttribute("x", bbox.x);
o.setAttribute("y", bbox.y);
o.setAttribute("width", bbox.width);
o.setAttribute("height", bbox.height);
o.setAttribute("stroke", 'black')
o.setAttribute("fill", 'none');
root.appendChild(o);
The .getBBox() method doesn't take transformation into account (per spec) according to this post:
How is the getBBox() SVGRect calculated?
To solve this you can add a parent g that has no transform attribute:
var parentG = document.createElementNS("http://www.w3.org/2000/svg", "g");
root.appendChild(parentG);
var g = document.createElementNS("http://www.w3.org/2000/svg", "g");
g.setAttributeNS(null, 'transform', 'translate(50, 50)');
parentG.appendChild(g);
http://jsfiddle.net/sydgc091/
I need to 'scale' text to fill an antire HTML5 canvas. It appears that the scale() method does not affect text. I've seen approximation methods with iterative loops on the measureText() method but this doesn't get me exactly what I need. Ideally I'd like to fill both horizontally and vertically without conserving the aspect ratio. Would SVG possibly be able to help with this?
My bad - Scale DOES apply to text. I've come up with a solution:
context.font = "20px 'Segoe UI'";
var metrics = context.measureText("Testing!");
var textWidth = metrics.width;
var scalex = (canvas.width / textWidth);
var scaley = (canvas.height / 23);
var ypos = (canvas.height / (scaley * 1.25));
context.scale(scalex, scaley);
context.fillText("Testing!", 0, ypos);
Scale does affect text. Try this:
var can = document.getElementById('test');
var ctx = can.getContext('2d');
ctx.fillText("test", 10, 10); // not scaled text
ctx.scale(3,3);
ctx.fillText("test", 10, 10); // scaled text
See it in action here:
http://jsfiddle.net/3zeBk/8/