Im using:
Contentflow 1.0.2
jquery 1.6.1
I'm trying use Contentflow using reflection and with maximum width/height so it covers all the screen without any scroll bar vertically or horizontally.
This example shows exactly what I wanna do, but it uses ImageFlow (another plugin)
http://themes.themegoods.com/keres_wp/?page_id=459
At this point my config is like this and everything works fine except that Contentflow doesn't resize when I change the browser size.
var cf = new ContentFlow('contentFlow', {
reflectionColor: "#000000",
circularFlow: false,
startItem: 0,
fixItemSize: true,
scaleFactor:1.5
});
Related
The default behavior of fabricJS resizefilters makes images look great as long as the zoom level is set to 1.0. This means images with a resizefilter look pixelated when zoomed in, as well as when exporting the canvas with a multiplier. Is there a way for resizefilters to take into account the current canvas zoom level or toDataURL multiplier?
https://jsfiddle.net/melchiar/mh9ba4pz/
fabric.Image.fromURL(imageData, function(img) {
img.set({
left: 10,
top: 10
}).scale(0.5);
img.resizeFilter = new fabric.Image.filters.Resize({
resizeType: 'hermite'
});
img.applyResizeFilters();
canvas.add(img);
});
Hi i have seen your question on the issue tracker too, as of now there is no simple way to obtain it with the resize filter.
The only way to make it non pixellated is to remove at export time the resizeFilter and add one resizeFilter in the normal filter chain with a precalculated ratio.
This is actually a bug.
issue tracker: https://github.com/fabricjs/fabric.js/issues/5071
Just an update on this question, this issue was a bug that was fixed with Version 2.3.4. Using a resizefilter will now apply resizing based on the current zoom level, and works with toDataURL multipliers as well.
I'm using fabricjs 1.7.17 and have seen this issue below on IE Edge, Chrome and Firefox.
where the canvas is being set with a width and height in HTML of 768px.
Within my fabricjs canvas init I've got:
editor.canvas = new fabric.Canvas('editor')
editor.canvas.setDimensions({
width: 1080,
height: 1080,
allowTouchScrolling: false,
backgroundColor: 'rgba(55, 55, 55, .33)',
rotationCursor: 'url(/static/img/rotate.cur) 10 10, crosshair'
}, {backstoreOnly: true})
The problem is when you call the editor.canvas.toDataURL() method the size of the goes from 768px to 1080px
If you call the browser's native canvas.toDataURL() method there isn't a jump in size.
Anyone bump into this and have a possible fix?
Here's a simplified jsfiddle:
https://jsfiddle.net/m8dhmbtu/23/
Click on the "Native Canvas.toDataURL()" and you'll get the results to console.log and there will be no change to the displayed canvas in the preview window.
Click on the "Fabricjs canvas.toDataURL()" and you'll also get the results (the same) to console.log however; you'll also get a jump in the size of the in the preview window...this is what I'm trying to prevent.
I think the problem is actually a bug.
You set the canvas to 1080 for backstore dimension only, meaning that the canvas will be sized but the css will be left untouched.
A dataurl will reset the canvas after the process to fix it back in case the export to data url had a multiplier.
while this can be fixed at least for the non multiplied situations, a proper fix is needed.
The proper fix consist in setting backstore only during export so that the css does not get touched.
A better fix would be to do not touch the original canvas and create one on the fly just for exporting.
please go on official fabricjs repository and open an issue for this.
I am trying to build a doughnut chart with Chart.js and added a text in the middle blank area. Unfortunately, when I drag my mouse over the graph, the text disappears. I found that, if I make the showTooltips: false in the options part, the text would become permanent, but I lose the labels this time.
Q1: Does anyone know how to make text permanent without losing the labels?
Q2: Does ChartNew working fine with Chrome? I heard that there are some problems with the latest chrome and opera versions.
Thank you :)
Q1: Does anyone know how to make text permanent without losing the labels?
Just extend the doughnut chart to (always) draw your middle text after the chart draw is complete. Something like
Chart.types.Doughnut.extend({
name: "DoughnutAlt",
draw: function(){
Chart.types.Doughnut.prototype.draw.apply(this, arguments);
this.chart.ctx.font = Chart.helpers.fontString(14, "normal", "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif");
this.chart.ctx.fillStyle = "Black";
this.chart.ctx.textAlign = "center";
this.chart.ctx.textBaseline = "middle";
this.chart.ctx.fillText("Hello World!", this.chart.width / 2, this.chart.height / 2);
}
});
Fiddle - http://jsfiddle.net/upbcbyfb/
Q2: Does ChartNew working fine with Chrome? I heard that there are
some problems with the latest chrome and opera versions.
A cursory (titles only :-)) glance of the GitHub issue list (https://github.com/nnnick/Chart.js/issues?utf8=%E2%9C%93&q=milestone%3Av2.0+) does not show anything specific to Chrome or Opera.
If there is something specific you want to try out, you can always fiddle your code into the latest (awesomely customizable) version (you have to make a few changes though)
Here is a fiddle to get you started - http://jsfiddle.net/beehe4eg/
That said, the current v2.0.0 (alpha 3) is a pre-release version (see
https://github.com/nnnick/Chart.js/releases), so you probably don't want to switch your production code to this right now.
I'm trying to create a responsive version of the zoomable treemap example. What needs to be added so that the treemap resizes with the window?
When I try to change treemap.size() in an update method on $(window).resize(), nothing seems to happen.
I'm setting the svg to style="width: 100%; height: 100%" and the svg resizes, but the layout of the treemap does not. I also tried using viewbox and preserveAspectRatio per this answer and the treemap looks initially correct, however the zooming functionality no longer works correctly because the treemap layout doesn't know its correct size.
One way to handle this is as Lars Kotthoff told you can redraw the treemap.
For that first you should specify the width and height parameters as your graph containers width and height before that you should specify container width and height in percentage. And wrap the zoomable map drwing script inside a function (Let's call it as zoomabletreemap())
Then you should call the zoomabletreemap() function for the window resize event using JavaScript. Before calling the javascript you should remove the old graph also.
$(window).resize(function () {
var div = document.getElementById("my-svg-div"); //id of the div we are appending to the chart container to contain the svg
div.parentNode.removeChild(div);
ZoomableTreeMap();
});
Here is the working example for the same I explained above
I have a function that adds an imageOverlay and a semitransparent Rectangle on top of that image (so as to tint the image, and draw a keyline around it).
activeUserImage = new L.imageOverlay(imageUrl, imageBounds).addTo(map);
activeUserTile = new L.rectangle(imageBounds, {stroke: true, color: "#ffffff", opacity:1, weight: 1, fillColor: "#003572", fillOpacity: 0.7, clickable:true}).addTo(map);
this works great, but then I want to remove the image and rectangle with:
map.removeLayer(activeUserImage);
map.removeLayer(activeUserTile);
This seems to work well...
However when I try and add a second Image & Rectangle (using the same function) the rectangle SVG is being rendered underneath the image, so I don't see the colored overlay.
This seems to be because the element is being left behind from the first creation, and then when the image is being added a second time it appears in front of the SVG.
Q:
Is this a bug? Should the SVG element not be cleared too?
Can I adjust z-index of the image or SVG on creation?
should i be containing to rectangle in a different layer to the images? How?
Many Thanks
OK, so the Leaflet bringToFront() method didn't work, but instead I have used a bit of JQuery to force the same approach.
svgObj = $('.leaflet-overlay-pane svg');
svgObj.css('z-index', 9999);
This works, but still feels like a hack... however if (?) there is a bug in LEaflet, then maybe this will have to do???
Any better ideas?
The bringToFront() function alows you to bring layer to the top.
Search it in the docs.