I am using sigma.js and try to add background image instead of background color. It work find but not possible to zoom in/out. Someone already add a question here but no answer yet. So anyone have a solution of this issue?
After a simple lucky search i found the following solution:
var c = s.camera;
// Zoom out - single frame :
c.goTo({
ratio: c.ratio * c.settings('zoomingRatio')
});
// Zoom in - single frame :
c.goTo({
ratio: c.ratio / c.settings('zoomingRatio')
});
// Zoom out - animation :
sigma.misc.animation.camera(c, {
ratio: c.ratio * c.settings('zoomingRatio')
}, {
duration: 200
});
// Zoom in - animation :
sigma.misc.animation.camera(c, {
ratio: c.ratio / c.settings('zoomingRatio')
}, {
duration: 200
});
Related
I'm doing a project using Highcharts Gantt, and I'm having a little trouble mastering it at the moment, especially the management of its height and Y axis.
Here Sandbox : https://codesandbox.io/s/nice-microservice-fuv76?file=/src/GanttMain.jsx:334-352
Let me explain:
What I want to do is set a maximum height and use scrollablePlotArea to make the y-axis scroll, while keeping the X-axis header.
The problem is: if I define a minHeight in scrollablePlotArea, the Y axis cuts the events until the minimum height defined (see sandbox), if I increase minHeight, it will cut less events, but the number is dynamic, so impossible to put a fixed value...
My question is: How to define a maximum height, while keeping a Y scroll that displays all events, While not changing the line height?
I tried several possibilities with the documentation, but nothing works...
I hope I made myself understood...
Thank you very much for your help.
This problem is a bug in Highcharts Gantt and it is similar to this issue: https://github.com/highcharts/highcharts/issues/13884
As a workaround you can dynamically set minHeight for scrollable plot area, example:
let allowChartUpdate = true;
Highcharts.ganttChart('container', {
chart: {
animation: false,
scrollablePlotArea: {
minHeight: 450
},
events: {
render: function() {
if (allowChartUpdate) {
allowChartUpdate = false;
this.update({
chart: {
scrollablePlotArea: {
minHeight: ...
}
}
});
allowChartUpdate = true;
}
}
}
},
...
});
Live demo: http://jsfiddle.net/BlackLabel/ywt2cmkn/
API Reference: https://api.highcharts.com/gantt/chart.events.render
I'm extending Leaflet's GridLayer to show canvas tiles on which I draw some data points - the problem is that after zooming in and out the other zoom layers are still visible, or are partially chopped off in random ways.
E.g. on the left is zoom level 13, on the right is after zooming out to 11 and back to 13 -
How can I show only the current zoom level, and prevent the canvas tiles from getting chopped off?
This is how I ended up fixing it, though there might be better ways...
Here's my GridCanvas class -
L.GridLayer.GridCanvas = L.GridLayer.extend({
onAdd: function (map) {
L.GridLayer.prototype.onAdd.call(this, map);
map.on('zoomend', e => this.onZoomEnd(e.target._zoom));
},
// on zoom end, want to hide all the tiles that are not on this zoom level,
// and show all the ones that are
onZoomEnd: function (zoom) {
Object.values(this._levels).forEach(level => {
level.el.style.display = (level.zoom === zoom) ? 'block' : 'none';
});
},
createTile,
});
The visibility of the tiles also gets set in seemingly random ways - this seemed to fix the problem - adding a class to the canvas elements and setting them to always be visible -
function createTile(coords, done) {
const canvas = L.DomUtil.create('canvas', 'grid-canvas-tile');
...
}
with styles.css:
.grid-canvas-tile {
visibility: visible !important;
}
I'm using a some code from https://github.com/dimxasnewfrozen/Panning-Zooming-Canvas-Demos/blob/master/demo12/main.js (demo at http://dayobject.me/canvas/demo12/) to zoom in on an image using the Canvas element.
However, when zooming the jump between one zoom level and the next is too large, so I need to add a scale parameter.
How would I got about doing this?
In your main.js, you can change your zoomLevel here,
mouseWheel: function (e) {
e.preventDefault() // Please add this, coz the scroll event bubbles up to document.
var zoomLevel = 2;
...
if (delta > 0)
{
// ZOOMING IN
var zoomedX = canvasPos.deltaX - (canvasZoomX - canvasPos.deltaX);
var zoomedY = canvasPos.deltaY - (canvasZoomY - canvasPos.deltaY);
// scale the image up by 2
initialImageWidth = initialImageWidth * zoomLevel;
}
else
{
// ZOOMING OUT
var zoomedX = (canvasPos.deltaX + canvasZoomX);
var zoomedY = (canvasPos.deltaY + canvasZoomY);
// scale the image down by 2
initialImageWidth = initialImageWidth / zoomLevel;
}
}
Disclaimer: this ruins the zoomedX and zoomedY values. You gotta fix them :)
It seams to me as if the algorithm always takes half of the dimension befor the zoom. At the end of you code you see it in main.js the mouseWheel function:
initialImageWidth = initialImageWidth * 2;
the width is divided by 2 so just change the used value.
You said the step used to zoom in and out is too big.
So I suggest that you generate the new value by using the dimensions of the image you want to zoom. For example you take a percentage of the biggest dimension of the current image.
That's how you can implement a zoom function that zooms according to the dimensions of the image
I want to change the fillColor as the animation occurs. In a way that makes it go from one color to the other, like blue->green.
I've been testing methods and so far I've been able to make the color change, but it's transition is not smooth.
The method currently involves 2 functions:
onAnimationProgress: function(){},
// Function - Will fire on animation completion.
onAnimationComplete: function(){}
but while using the onAnimationProgress, I can't see a way to see the progress of the animation, like how far along the progress is.
Any ideas?
The onAnimationProgress has 2 parameters easeDecimal and stepDecimal that you can use
var myLineChart = new Chart(ctx).Line(data, {
onAnimationProgress: function (easeDecimal, stepDecimal) {
// stepDecimal proceeds uniformly from 0 to 1
// easeDecimal proceeds depending on the easing function from 0 to 1
console.log(stepDecimal)
}
});
For instance, to change the fillColor - here I just adjust the transparency
var myLineChart = new Chart(ctx).Line(data, {
animationSteps: 200,
onAnimationProgress: function (easeDecimal, stepDecimal) {
this.datasets[0].fillColor = "rgba(120,120,120," + stepDecimal + ")";
}
});
I'm currently working on a responsive website with a page-wide div-box containing a Google Map. As the display width (and height) varies, I'd need to set a different zoom level at width 320 as I do at 1200+. Resizing is not the issue nor is centering.
What I want to achieve is the zoom level to adjust as the viewport changes, either by setting different zoom levels corresponding to certain screen resolutions or something from min to max zoom.
I think this post on Stackoverflow pretty much is about the same problem, but without solution. Any ideas greatly appreciated!
You need the bounding box,i.e. corners of the window. Then you can use the mercator projection to compute the x and y ratio:Convert lat/lon to pixel coordinate?. Then you can multiply the ratio with the zoom levels and check min and max values.
Tricky problem indeed. It's best to set a timer in the resize event handler as that event can fire a lot.
var zoomLevelSizes = [
{triggerWidth: 10000, zoomLevel: 9 },
{triggerWidth: 720, zoomLevel: 8 },
{triggerWidth: 320, zoomLevel: 7 }
];
var resizeTimeout = -1;
function handleResizeEvent() {
resizeTimeout = -1;
var width = window.innerWidth;
for(var i = zoomLevelSizes.length - 1; i >= 0; i--) {
if(width < zoomLevelSizes[i].triggerWidth) {
if(map.getZoom() > zoomLevelSizes[i].zoomLevel) {
map.setZoom(zoomLevelSizes[i].zoomLevel);
console.log('changed to zoom level ' + zoomLevelSizes[i].zoomLevel);
break;
}
}
}
}
handleResizeEvent()
//Can't do anything resource intensive here as this can get triggered a lot
google.maps.event.addDomListener(window, 'resize', function() {
if(resizeTimeout !== -1) {
clearTimeout(resizeTimeout);
}
resizeTimeout = setTimeout(handleResizeEvent, 500);
});
JSFiddle example