My div content canvas in first width : 1300, height = 500
Then I resize div to width = 800, height = 500
And I resize canvas to width = 800, height = 500 to fix window
But Some Elements in canvas is hide (because My canvas width now is 800px)
So I use setViewBox to zoom it to fix width my new width, height
Result: mouse not fix with element when I drag them (I think I calculate wrong width-height for setViewBox)
Other question: Have any way to let canvas height auto extend when drag element down?
Thanks for help :)
try this code (you have to include jquery + raphael js 2.x) :
var original_width = 777;
var original_height = 667;
var zoom_width = map_width*100/original_width/100;
var zoom_height = map_height*100/original_height/100;
if(zoom_width<=zoom_height)
zoom = zoom_width;
else
zoom = zoom_height;
rsr.setViewBox($("#"+map_name).offset().left, $("#"+map_name).offset().top, (map_width/zoom), (map_height/zoom));
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.
In fabric.js, how do you adjust stroke thickness for the object selection box and control handles?
There's a bunch of customization options available, however it isn't clear on how you can customized stroke thickness. Is it possible, perhaps through an indirect way?
Note: The properties selectionColor, selectionBorderColor, selectionLineWidth are misleading... they have to do with the temporary selection box that appears when attempting to do a fresh drag-select across the canvas. Once your selection is made, it disappears and then you see the persistent object selection box with control handles (the thing I'm trying to customize).
See links:
http://fabricjs.com/customization
http://fabricjs.com/controls-customization
Ok here's a 2-part solution:
https://codepen.io/MarsAndBack/pen/bGExXzd
For the selection box stroke thickness:
Use fabric.Object.prototype.set to customize any object selection globally. Also, borderScaleFactor is documented, but not included in the fabric.js customization demos:
fabric.Object.prototype.set({
borderScaleFactor: 6
})
For the control handle stroke thickness:
Here we override differently, and actually draw new elements using standard HTML5 canvas properties. Through this method you could also target specific control handles and even use image icons.
fabric.Object.prototype._drawControl = controlHandles
fabric.Object.prototype.cornerSize = 20
function controlHandles (control, ctx, methodName, left, top) {
if (!this.isControlVisible(control)) {
return
}
var size = this.cornerSize
// Note 1: These are standard HTML5 canvas properties, not fabric.js.
// Note 2: Order matters, for instance putting stroke() before strokeStyle may result in undesired effects.
ctx.beginPath()
ctx.arc(left + size / 2, top + size / 2, size / 2, 0, 2 * Math.PI, false);
ctx.fillStyle = "pink"
ctx.fill()
ctx.lineWidth = 4 // This is the stroke thickness
ctx.strokeStyle = "red"
ctx.stroke()
}
SO code snippet:
const canvas = new fabric.Canvas("myCanvas")
canvas.backgroundColor="#222222"
this.box = new fabric.Rect ({
width: 240,
height: 100,
fill: '#fff28a',
myType: "box"
})
canvas.add(this.box)
this.box.center()
// Selection box border properties
// ----------------------------------------
fabric.Object.prototype.set({
borderColor: "white",
borderScaleFactor: 6
})
// Control handle properties
// ----------------------------------------
fabric.Object.prototype._drawControl = controlHandles
fabric.Object.prototype.cornerSize = 20
function controlHandles (control, ctx, methodName, left, top) {
if (!this.isControlVisible(control)) {
return
}
var size = this.cornerSize
// Note 1: These are standard HTML5 canvas properties, not fabric.js.
// Note 2: Order matters, for instance putting stroke() before strokeStyle may result in undesired effects.
ctx.beginPath()
ctx.arc(left + size/2, top + size/2, size/2, 0, 2 * Math.PI, false);
ctx.fillStyle = "pink"
ctx.fill()
ctx.lineWidth = 4
ctx.strokeStyle = "red"
ctx.stroke()
}
<script src="https://pagecdn.io/lib/fabric/3.6.3/fabric.min.js"></script>
<canvas id="myCanvas" width="700" height="400"></canvas>
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?
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/
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/