I'm creating an image carousel for React that I style and rotate using the code found here: https://3dtransforms.desandro.com/carousel
When I first load the carousel things are nice and clear, but as soon as I rotate it, everything blurs (even once motion has stopped), except the item in the original 0-degree position when it finally rotates back around to the front. I tried using -webkit-filter: blur(0); but that doesn't have an impact. Any idea how I can avoid the text blurring?
Before:
After:
I've isolated it to this transform call:
transform: rotateY( ${(props : any) => props.yAngle}deg ) translateZ(${(props : any) => props.zAmount}px)
Since if I put 0 for the props.yAngle everything is clear but if there's any degree that's not zero there, it all becomes blurred.
Related
I have a component with 2 Boxes and a shadow:
First Box is outside the view: topBox
Second Box is inside the view at the bottom: middleBox
Third is the shadow of the Box on the bottom (a png): Shadow
If i start the animation (or if the component loads) i want to have the following animation:
Step 1
middleBox move up 50px
shadow grows (from scale(0.8) to scale(1))
Step 2
topBox moves down 50px into the view
Step 3
(this animation should look like the two boxes smash into each other, like if if they would crash. like two balls hitting each other and go back to origin.)
middleBox moves up 20px and back down 20px
topBox moves down 20px and back up 20px
Shadow scales 1.1 and back to 1
Step 4
topBox moves back outside the view
So i created useSprings for all steps and i tried to update state when the first animation finished based on this update the other animation. i also tried with useChain to have the animations together. But nothing seems to work.
so i would have state
const [isAnimationMove, setAnimationMove] = useState(true)
const [isAnimationHit, setIsAnimationHit] = useState(false)
and then change the state after the second animation finishes to trigger the new animations
const topBoxMoveDown = useSpring({
from: { transform: 'translate(-20%, 100%)' },
transform: 'translate(-10%, 60%)',
onRest: () => {
setAnimationMove(false);
setIsAnimationHit(true);
}
and render the different animation on the element
<BoxFromTop
animationStyle={
isAnimationMove ? topBoxMoveDown :
isAnimationHit ? topBoxHit : null } />
which is
const topBoxHit = useSpring({
from: { transform: 'translate(-10%, 60%) rotate(0)' },
transform: 'translate(-10%, 55%) rotate(10deg)',
reset: true,
});
However it works kind of as long as i would not use transform again in the topHitBox but i think my question is more about the concept in general:
How do i animate different states and have control over what starts when and what follows what. I mean i just be a simple animation with multiple steps but i can not get my head around how this works with react-spring. Am i using the wrong library? is there a better one to use for this? or did i just use the wrong approach?
I just started to learn AnyChart and I just have completed my first chart by using it. However, I don't know why the line marker goes behind the bars. I checked the
Is there any possibility to use something like a zindex? I would appreciate your help.
Thanks a lot
Screenshot of my bar chart
When you create a line marker, you can set its appearance by using the stroke() method, like this:
var lineMarker = chart.lineMarker();
lineMarker.value(9000);
lineMarker.stroke({
thickness: 3,
color: '#7E57C2',
dash: "2 4",
});
In your case, if you want to change its z-index just call the zIndex() method on the lineMarker and on the series variable:
var series = chart.bar(data);
series.zIndex(1);
lineMarker.zIndex(2);
The bigger the index, the higher the element position is.
If you would like to learn more about marker's appearance, please check the documentation.
I am trying to plot a series using a pie/radial chart to react. As per the documentation, I am passing the showAlways: true property that keeps showing a certain value in the middle of the chart even when the cursor is hovered or not hovered over the radial area.
But the following property does not seem to work in my case. Here is the link to the working snippet.
https://codesandbox.io/s/amazing-violet-wrp7y
I am not sure what's going wrong with the code here. Any help to resolve the same.
Your total.formatter function was not returning after calculating the total.
Here is the updated code
formatter(w) {
return w.globals.seriesTotals.reduce((a, b) => a + b, 0)
}
Updated CodeSandbox
I'm evaluating ShieldUI for a client's application and I've run into an issue with setting styles on the Y axis header. Below is the code from the view:
#(Html.ShieldChart(Model)
.Name("chart")
.PrimaryHeader(header => header.Text("")) //no header needed
.Export(true) //turn on export
.ChartLegend(legend => legend.Enabled(false)) //turn off legend since there's only 1 series
.Tooltip(tooltip =>
tooltip.ChartBound(true)
//turn on the axis marker tooltip thingy
.AxisMarkers(axisMarkers =>
axisMarkers.Enabled(true).Mode(TooltipAxisMarkerMode.XY)
.Width(1).ZIndex(3)
)
.CustomHeaderText("{point.pointName:MM-yyyy}")
.CustomPointText("{point.y:c}")
)
.AxisX(axisX => axisX
.CategoricalValues(model => model.Date)
.Title(title => title.Text("Month").Style(style => style.FontWeight(FontWeight.Bold)))
.AxisTickText(axisTickText => axisTickText.Format("{text:MM-yyyy}")))
.AxisY(axisY => axisY
.Title(title => title.Text("Price").Style(style => style.FontWeight(FontWeight.Bold)))
.AxisTickText(axisTickText => axisTickText.Format("{text:c}")))
.DataSeries(dataSeries => dataSeries.Line()
.Data(model => model.Price)))
The bold setting on the x axis works fine, but I can't get bold or size to work on the Y axis. It looks like there may be something wrong with the markup that gets generated. Below are the two text elements from the markup:
<text x="432" y="375" style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font-size:12px;color:#404040;font-weight:bold;fill:#404040;" zIndex="7" text-anchor="middle" visibility="visible"><tspan x="432">Month</tspan></text>
<text x="25" y="181" style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font-size:12px;color:#636363;font-weight:bold;font:11px Segoe UI, Tahoma, Verdana, sans-serif;fill:#636363;" zIndex="7" transform="rotate(270 25 181)" text-anchor="middle" visibility="visible"><tspan x="25">Price</tspan></text>
The first one works fine, the second one doesn't, and I notice that the way they define their font information is different (the first using font-family and font-size, the second using a single font setting. If I copy (via firebug) the style definition from the x to the y, the y axis becomes properly bolded.
Is there something I'm doing wrong, or is this a bug with the way ShieldUI generates the SVG? If it is a bug, any chance of it being fixed any time soon? I can think of several ways to work around the problem, but I'd rather leave hacks out if possible and just wait for a fix if one would be on the horizon.
Edit: I realized that I'd copied markup for the Y axis that didn't match the view code I'd included here, so I updated that. After doing so, I realized that the tag is getting a "font:" style added at the end after it has already defined the family, size, etc. That makes me think even more so that this is a bug with ShieldUI in how it generates that markup.
We've identified a bug in the Shield UI JavaScript Chart component that also affected the ASP.NET and MVC wrappers. The behavior you're describing was due to an issue in the way font settings were applied to chart axis titles. In some situations, the Shield UI Chart applied a default font style that prevented settings like fontSize and fontWeight from getting applied.
The issue was fixed shortly after discovery and will be available in the upcoming 1.6.4 version of the Shield UI JavaScript suite expected in the coming week. The fix is compatible with all server-side wrappers, including ASP.NET MVC.
i am trying to use TextBoxRenderer to render a "hot" text box:
TextBoxRenderer.DrawTextBox(e.Graphics, rectangle, TextBoxState.Hot);
except that it doesn't work, it doesn't render the text box as hot.
TextBoxState.Selected doesn't render as selected
TextBoxState.Hot doesn't render as hot
How do i make TextBoxRenderer.DrawTextBox(..., Hot) render as Hot?
Related but different question:
How do i make TextBoxRenderer.DrawTextBox(..., Selected) render as Selected?
It seems that TextBoxRenderer uses EP_BACKGROUNDWITHBORDER, whereas EP_EDITBORDER_NOSCROLL is typically used by TextBox controls[1].
if (VisualStyleRenderer.IsSupported)
{
// Use the text control's focus rectangle.
// EP_EDITBORDER_NOSCROLL, EPSN_FOCUSED
VisualStyleElement element = VisualStyleElement.CreateElement("EDIT", 6, 3);
if (VisualStyleRenderer.IsElementDefined(element))
{
VisualStyleRenderer renderer = new VisualStyleRenderer(element);
renderer.DrawBackground(e.Graphics, ClientRectangle);
}
}
(It's tempting to try to get the element from VisualStyleElement but there's no nested class for EP_EDITBORDER_NOSCROLL. So numeric constants 6 and 3 it is.)