By setting fill property we can set the background color property of the zoom controls, but the button text color is not a property we can set.
chart.zoomControl.plusButton.background.cornerRadius(5, 5, 5, 5);
chart.zoomControl.plusButton.background.fill = '#014888';
chart.zoomControl.plusButton.background.states.getKey('hover').properties.fill = '#27aad6';
Is there a choice to set it?
I have set it by this way:
chart.zoomControl.plusButton.label.fill = '#ffffff';
chart.zoomControl.minusButton.label.fill = '#ffffff';
chart.set("zoomControl", am5map.ZoomControl.new(root, {
background: am5.Rectangle.new(root, {
// fill: am5.color(0xeb354e),
fillOpacity: 0.9,
strokeOpacity:0
})
}));
Related
I need to only show two shapes in my custom Tui image editor, a rectangle and a circle, nothing more nothing less.
I added the rectangle and it works perfectly but if I add another function to add a circle and draw either or first the and then select the other, it still draws the first item. (if you click on a circle and draw, then click on the rectangle and draw then it draws a circle)
I am not sure how I can get this to function properly.
here is my two functions for my circle and rectangle.
const onAddCircle = () => {
imageEditorRef.current.startDrawingMode('SHAPE');
if (imageEditorRef.current.getDrawingMode() !== 'SHAPE') {
const { height } = imageEditorRef.current.getCanvasSize();
imageEditorRef.current.startDrawingMode('SHAPE');
imageEditorRef.current.setDrawingShape('circle', {
fill: 'transparent',
stroke: COLOR_STATUS_ORANGE,
strokeWidth: height / 100,
isRegular: true,
});
}
};
const onAddRectangle = () => {
if (imageEditorRef.current.getDrawingMode() !== 'SHAPE') {
const { height } = imageEditorRef.current.getCanvasSize();
imageEditorRef.current.startDrawingMode('SHAPE');
imageEditorRef.current.clearObjects();
imageEditorRef.current.setDrawingShape('rect', {
fill: 'transparent',
stroke: COLOR_STATUS_ORANGE,
strokeWidth: height / 100,
isRegular: true,
});
}
};
and they are triggered by buttons
<button
onClick={onAddCircle}
color="green"
/>
<button
onClick={onAddRectangle}
color="red"
/>
I've tried adding imageEditorRef.current.clearDrawingShape(); to the beginning of the functions but it says its not a function because it doesn't exist. then I tried adding imageEditorRef.current.clearObjects(); but that clears everything that it draw by that shape.
I've looked their documentation as well and there is nothing on how to actually clear shape cache before drawing or selecting another shape.
Could someone please help ?
I fixed it!
Ive combined both functions into one added a prop called shape, and it checks if the prop is set to either or and then if it is then it uses that logic else it clears the drawing board.
const drawShape = (Shape) => {
const { height } = imageEditorRef.current.getCanvasSize();
imageEditorRef.current.startDrawingMode('SHAPE');
if (Shape === 'circle') {
imageEditorRef.current.setDrawingShape('circle', {
fill: 'transparent',
stroke: COLOR_STATUS_ORANGE,
strokeWidth: height / 100,
isRegular: true,
});
} else if (Shape === 'rectangle') {
imageEditorRef.current.setDrawingShape('rect', {
fill: 'transparent',
stroke: COLOR_STATUS_ORANGE,
strokeWidth: height / 100,
isRegular: true,
});
} else {
imageEditorRef.current.stopDrawingMode();
}
};
I just updated to Xcode 9 and run to an iOS11 simulator. My custom view for the navaagation bar title is shifted down.
This code was working before i updated; it was vertically centered before
companyCountryView = CompanyNameView(frame: CGRect(x: 0, y: 0, width: Utils.getScreenWidth() - 150, height: 35))
companyCountryView.companyLbl.text = ""
companyCountryView.countryLbl.text = ""
self.navigationItem.titleView = companyCountryView
Even though I change values for y and height, no effect at all.
It seems the width value i used does not do any effect too.
I have solved it! You need to override the intrinsicContentSize in your custom view class and put the size of the view there:
class CustomView: UIView {
override var intrinsicContentSize: CGSize {
return CGSize(width: Utils.getScreenWidth() - 150.0, height: 35.0)
}
}
So in my application i have chat and i added CartesianGridLineAnnotation:
RadCartesianChart chart;
CartesianGridLineAnnotation cartesianGridLineAnnotation;
cartesianGridLineAnnotation = new CartesianGridLineAnnotation
{
Foreground = Brushes.White,
Background = Brushes.Green,
Axis = chart.VerticalAxis,
Stroke = Brushes.Red,
StrokeThickness = 1,
};
chart.Annotations.Add(...);
So as you can see i try to set Background color but the problem is that i cannot see any change in my CartesianGridLineAnnotation Label.
Other properties when changed look as expected.
Update
This is how i am populate my label:
cartesianGridLineAnnotation.Label = "bla bla";
As you can see i cannot see the backgroud color.
How can I manually set a custom cropping area using ngCropper ?
The area is sent through the option.data property, you bind them to the modal using ng-options
<img ng-cropper ng-options="options">
Then the controller must define the option the following way:
$scope.options = {
maximize: false, // very important otherwise it will overload the custom data
data:{x: 261, y: 7, width: 56, height: 56} // those are arbitrary values
};
The data properties corresponds to the following:
I have a simple Ext.ProgressBar and need to double it's height which works but didn't scale the progress image, just the outer box. I thought OK, maybee it is to small and can't scale but it has a height of >800px (sencha original images).
So how can this be done?
Here's the config
{
xtype: 'progressbar',
text: 'Some text',
border: 1,
height: 40
}
Height of progress bar is set in style definition. You can change height by changing .x-progress-bar css class. In modern browsers (eg. Chrome) all you need to do is to change height property, because background image is definied as gradient. Example:
// height of bar
.x-progress-bar {
height: 38px;
}
// height of text box
.x-progress-text {
height: 38px;
line-height: 38px;
}
Working sample: http://jsfiddle.net/D2QYN/2/
Another way is to attach handler to render event and set height of child elements which are not scaled verically. Example handler:
listeners: {
render: function(sender) {
var height = sender.bar.parent().getHeight(true); // content height
sender.bar.setStyle('height', height + 'px');
sender.textEl.setStyle('height', height + 'px');
sender.textEl.setStyle('line-height', height + 'px');
}
}
Working sample: http://jsfiddle.net/D2QYN/3/