I need to highlight the state when mouse hovers over by adding stroke around the state and adding a drop shadow. But when hover is off, the border stroke is gone, but the drop shadow stays. Is there anyway to remove the drop shadow?
Drop shadow is implemented as a filter. Is it possible to remove a filter at all?
Sample code is here: https://codepen.io/lima01/pen/OJmqgXv
var hoverState = polygonTemplate.states.create("hover");
hoverState.properties.fill = am4core.color("#367B25");
hoverState.properties.stroke = am4core.color("#ff0000");
hoverState.properties.strokeWidth = 5;
var hoverShadow = hoverState.filters.push(new am4core.DropShadowFilter);
hoverShadow.dx = 6;
hoverShadow.dy = 6;
hoverShadow.opacity = 0.3;
Thanks!
You need to set a default filter for the polygon's default state so that it knows what to revert itself to when the hover state is no longer active. You can do this by setting a DropShadowFilter for the polygon's defaultState to with a zero opacity:
var defaultFilter = polygonTemplate.defaultState.filters.push(
new am4core.DropShadowFilter()
);
defaultFilter.opacity = 0;
Related
I there a way, at runtime, other than using styles, to change the background color of a TListBox? Can I use the OnPaint event?
Because the TListbox doesn't have a property to change the background color, I can only think of the following, which is based on combining two components, of which one (the TListBox) uses a built-in style. Note however, that this is not depending on TStyleBook nor any of the style files supplied with Delphi Firemonkey.
Place a TRectangle as a background for the TListBox. Set its Fill - Color property to a color you like. (I used "Cornsilk" in the example).
Place the TListBox on the rectangle as a child of the rectangle. In the "Object Inspector" locate the StyleLookup property and change its value to transparentlistboxstyle. This makes the listbox transparent and the rectangle and its fill color to shine through.
If you make the TListBox one pixel smaller than the rectangle on each side, you can use the Sides property to provide a thin frame around the listbox. Or you can choose to make them equally sized and not show any frame.
My test result looks like this:
The TRectangle and the TListbox properties from the .fmx file:
object Rectangle1: TRectangle
Anchors = [akLeft, akTop, akBottom]
Fill.Color = claCornsilk
Position.X = 7.000000000000000000
Position.Y = 40.000000000000000000
Size.Width = 361.000000000000000000
Size.Height = 219.000000000000000000
Size.PlatformDefault = False
object ListBox1: TListBox
Anchors = [akLeft, akTop, akRight, akBottom]
Position.X = 1.000000000000000000
Position.Y = 1.000000000000000000
Size.Width = 359.000000000000000000
Size.Height = 217.000000000000000000
Size.PlatformDefault = False
StyleLookup = 'transparentlistboxstyle'
TabOrder = 0
ParentShowHint = False
ShowHint = False
DisableFocusEffect = True
ItemHeight = 48.000000000000000000
DefaultItemStyles.ItemStyle = 'listboxitemrightdetail'
DefaultItemStyles.GroupHeaderStyle = ''
DefaultItemStyles.GroupFooterStyle = ''
Viewport.Width = 359.000000000000000000
Viewport.Height = 217.000000000000000000
end
end
To change the color of ListBox1, you actually change the color of the TRectangle:
procedure TForm5.ColorListBox1ItemClick(const Sender: TCustomListBox;
const Item: TListBoxItem);
begin
Rectangle1.Fill.Color := TColorListBox(Sender).Color;
end;
I'm trying to create a column chart with minimum pixel height columns. This is easy in chartjs (set the minBarLength property), however I can't figure out how to do so in amcharts.
I've tried setting series.column.template.minHeight to no effect. I've also tried setting pixelHeight and height, but also with no luck.
one workaround can be using scrollbar in Y axis like this following:
chart.scrollbarY = new am4core.Scrollbar();
chart.scrollbarY.start = 0;
chart.scrollbarY.end = 0.08;
with value Axis
valueAxis.min = 0;
valueAxis.max = 10;
This is not the best solution i agree but you can use it to slightly zoom with the buttons and scale and see
let me know if it works!
I need to remove paddings/spaces between data visible on the XYChart.
I removed paddings from chart and tried to remove it from valueaxis and lineseries but nothing helped.
chart.padding(0, 0, 0, 0);
I also noticed that if I have more dates with values there is no space on the left and right. But what if there is less data, how to fix it.
https://codepen.io/lrobotka/pen/ZVdvyg
You need to set startLocation and endLocation on your DateAxis instance:
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
// Change this to 0.5
dateAxis.renderer.grid.template.location = 0.5;
// Add the following
dateAxis.startLocation = 0.5;
dateAxis.endLocation = 0.5;
// Change the padding values
chart.padding(0, 30, 0, 30);
Please check more about setting where axis starts and ends here.
I'm not able to get the width nor the height of an element in the effects attaching to the element. I tried every single way:
void UpdateSize()
{
var _1 = ((BoxView)Element).Width; //-1
var _2 = ((BoxView)Element).WidthRequest; //-1
var _3 = ((BoxView)Element).Height; //-1
var _4 = ((BoxView)Element).HeightRequest; //-1
var _5 = Control.Width; //NaN (UWP). NaN is not a number
var _6 = Control.ActualWidth; //0
var _7 = Control.Height; //Nan (UWP). NaN is not a number
var _8 = Control.ActualHeight; //0
}
I even tried to pass the width and the height as a attached properties to the effect.
I need the width and height because i'm creating a drop shadow and I must resize the SpriteVisual to be the same size as the element.
May be the element draws after applying the renderer/effects so we have no size yet. If so, how to work around with this?
I would suggest to wire-up the SizeChanged event of Element when effect is attached and then creating your shadow once it fires. Also, make sure to unsubscribe the event when the effect is detached.
am having an option to switch Orbit control to FirstPerson control, but while switch my model is disappearing from the scene
my code is below
controls = new THREE.FirstPersonControls( camera );
controls.movementSpeed = 70;
controls.lookSpeed = 0.04;
controls.noFly = true;
controls.lookVertical = false;
i need that switch from one control to another the object should be fixed on the position at present
Unlike OrbitControl, in the FirstPersonControl the camera points to an artbitrary directions. So use camControl.lon and camControl.lat to control the initial direction of camera.
camControl = new THREE.FirstPersonControls(camera);
camControl.lookSpeed = 0.1;
camControl.movementSpeed = 4;
camControl.noFly = true;
camControl.lookVertical = true;
camControl.lon = -90;
camControl.lat = 0;
Also make sure your mouse is not over the window as the scene is moving because as another poster pointed out, as soon as the mouse is on the cavas FirstPersonControl will start rotating the camera.
As of three.js R101, it's possible to use FirstPersonControls.lookAt(). FirstPersonControls.lat and FirstPersonControls.lon have been removed.
Besides, when creating FirstPersonControls the initial orientation of the camera is now respected.