Same question like the title:
html2canvas can use scale or filter: blur(10px) from image when take screenshot?
Example:
filter: blur(10px);
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
I don't know about "blur", but i'm sure "scale" is not supported. There is a pull request about this tho. You can find it here: https://github.com/niklasvh/html2canvas/pull/127
Related
This is a follow-up question to this question. Basically, I have the same problem as described there where the table does not have as many rows as possible, there is more space there but it is unused.
I got it working for my table with the help of the answers in the last question. Now I had to adda horizontal Scroll-Container (the height is fixed) arround this table. Then the problem came up again.
I built a demo version with which you can see the problem and try arround with here.
The wanted result is just like as if you removed the ScrollContainer, then the table fills the entire page.
The same problem occurs when using this table inside of an IconTabBar but I was able to find an ugly work-around which does not work here. After the table was rendered I added the style height: 100% manually to the html-parents of the table (these are generated divs of the IconTabBar). This enabled the Table to receive the full height from its parents. With the ScrollContainer this tactic does not seem to work.
You can fix it like this:
onInit: function () {
this.oTable = this.byId("TableID");
this.oTable.onAfterRendering = function () {
const table = this.getTable();
const aColumns = table.getColumns();
for (let i = 0; i < aColumns.length; i++) {
aColumns[i].setProperty("width", "auto");
}
this.setHeight("100%");
};
}
And you may try these properties:
flexible: true/false,
resizable: true/false,
autoResizable: true/false,
width : "auto"
Please have a look at the restrictions of visibleRowCountMode="Auto"
https://ui5.sap.com/#/api/sap.ui.table.Table%23methods/getVisibleRowCountMode
See here the the layoutData definition for the HBox so that it gains the height from its parent
<layoutData>
<FlexItemData growFactor="1" />
</layoutData>
and also height: 100% style for the ScrollContainer's inner element which also let the table know the height of its container.
Is it possible to loop through all of the buildings on the map an assign them different colours, or a different property value that drives a thematic grouping?
I have code to loop through the buildings:
features = map.queryRenderedFeatures({ layers: ["building"], filter: ['==', 'extrude', 'true']});
features.forEach(function(feature){
// how to change feature colour or property in here?
}
There's a couple of ways achieving something like what you want.
Feature state
If your buildings layer has feature IDs, you can use setFeatureState to set a state on each building.
features = map.querySourceFeatures('building', { sourceLayer: 'buildings' }));
features.forEach(function(feature){
if (!map.getFeatureState({ id: feature.id, source: 'building', sourceLayer: 'buildings' }).color) {
map.setFeatureState({ id: feature.id, source: 'building', sourceLayer: 'buildings' }, { color: makeRandomColor() }
}
});
You can then use ['feature-state', 'color'] in an expression.
Quasi random
If there's no feature ID, you might be able to use some other attribute in a way that appears to be random. For instance, if there's some other kind of ID, you can use a mod function to map it to a color, in a way that might look kind of random.
Here is a full jsfiddle example
I use a custom series and draw a polygon:
data = [
[80.9251933067, 207.9047427038],
[52.8853803102, 337.7443022089],
[25.9926385814, 120.3586150136]
];
I use echarts.graphi.clipPointsByRect() (like in this echarts-example) to make sure, the polygon is not drawn outside of the grid.
echarts.graphic.clipPointsByRect(points, {
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
})
Initially the polygon is drawn correctly, like this:
But when I zoom in, the polygon is distorted: e.g. you can click the zoom part buttom below the chart to zoom from 40 to 60 - in this case I'd expect to see the part of the shape (like highlighted in yellow in the image above) - but instead I see this distorted image:
Maybe this function is not meant for this use-case, or is this a bug?
Is there another function for this use-case or does anyone know a workaround?
Update
Version 4.4.x contains a new clip feature. This makes it easy to avoid the distortion:
in the render function we don't need to clip our shapes: i.e. no need to call clipPointsByRect()
instead we just activate clip on the custom series:
New series definition with clip: 'true':
series: [{
type: 'custom',
clip: 'true',
renderItem: renderItem,
data: data
}]
Here is an updated jsfiddle expample
Original Version
it seems that the function is really not working as expected - see echarts-source code comment:
export function clipPointsByRect(points, rect) {
// FIXME: this way migth be incorrect when grpahic clipped by a corner.
// and when element have border.
I've created an issue #10222 for the e-charts project
A workaround for now is to use a custom clipping function
e.g. lineclip supports the Sutherland-Hodgman algorithm for polygon clipping
Here is the updated jsfiddle-example that shows the correct result when you zoom in:
There was an issue requesting documentation for theming which the author subsequently closed. The author found their answer. A non-programmer will probably not. At least, the non-programmer designer I'm helping doesn't even know where to start (and I still don't have a working different colored slider). This kind of documentation would be great. Even if it's just a link to the code #jdelafon found with some explanation that would suffice to answer the following specific example.
Ultimately, we want a set of sliders with each one a different color. It seems like the appropriate way to do this is with per-element inline styles.
I made a simple example here. Can you change the color of the slider? (We started down the path of breaking out to CSS, but the widget is so dynamic that this approach ends up being quite ugly.)
Slider has two different slots for theming, neither of which seems to respond to an embedded object with a selectionColor key.
Should be simple. Probably it is, but it appears to be undocumented. Otherwise it's a rad UI toolkit, thanks devs!
Take a look at this line of getMuiTheme.js. You can find there that slider can have those styles overridden:
{
trackSize: 2,
trackColor: palette.primary3Color,
trackColorSelected: palette.accent3Color,
handleSize: 12,
handleSizeDisabled: 8,
handleSizeActive: 18,
handleColorZero: palette.primary3Color,
handleFillColor: palette.alternateTextColor,
selectionColor: palette.primary1Color,
rippleColor: palette.primary1Color,
}
In material-ui you need to use MuiThemeProvider in order to use your custom theme. Taking your example:
...
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import { Slider } from 'material-ui';
const theme1 = getMuiTheme({
slider: {
selectionColor: "red",
trackSize: 20
}
})
const theme2 = getMuiTheme({
slider: {
selectionColor: "green",
trackSize: 30
}
})
const HelloWorld = () => (
<div>
...
<MuiThemeProvider muiTheme={theme1}>
<Slider defaultValue={0.5}/>
</MuiThemeProvider>
<MuiThemeProvider muiTheme={theme2}>
<Slider defaultValue={0.5}/>
</MuiThemeProvider>
</div>
);
export default HelloWorld;
Your modified webpackbin: http://www.webpackbin.com/EyEPnZ_8M
The sliderStyle you tried to use is for different styles :-) Like marginTop / marginBottom, a full list can be found here.
Just noticed that the pie-chart that is displayed is not utilizing the full width and height of the container.
I can see some blank spaces. Attached image below.
I have drawn borders to the div. And it is clear that the pie isn't utilizing the full width and height.
How do i get this thing fixed?
Any help would be appreciated.
Thanks in advance.
It looks like the default piechart renderer has a padding of 20px. Reduce it as you see fit by adjusting the padding such as:
jQuery("#'. $id .'").jqplot([your data here],
{
seriesDefaults: {
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
padding: 10
}
}
});