- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
是否有任何简单的方法来创建由单个水平虚线组成的虚线椭圆,其中虚线大小一致,并且可以指定它们的数量?
像这样:
我希望能够单独控制每个破折号,例如更改其颜色或将其绑定(bind)到我的 View 模型中的操作。
我能想到的实现这一点的唯一方法是创建一个自定义控件,其中包含每个破折号的路径元素,共同构成一个椭圆形,必须根据破折号的数量和大小计算路径数据椭圆的。
最佳答案
我现在回到这个问题上,并设法以一种非常灵活和通用的方式解决了它。从那以后需求发生了一些变化,不需要绑定(bind),但是可以很容易地添加。
注意这是一个圆圈,这就是我想要的。这个问题真的应该说圆而不是椭圆,即使圆是椭圆,但我离题了......
这是我想出的 UserControl:
StatusRing.xaml.cs
public partial class StatusRing
{
#region Dependency Property registrations
public static readonly DependencyProperty DashesProperty = DependencyProperty.Register("Dashes",
typeof(int), typeof(StatusRing), new PropertyMetadata(32, DashesChanged));
public static readonly DependencyProperty DiameterProperty = DependencyProperty.Register("Diameter",
typeof(double), typeof(StatusRing), new PropertyMetadata(150.00, DiameterChanged));
public static readonly DependencyProperty DashHeightProperty = DependencyProperty.Register("DashHeight",
typeof(double), typeof(StatusRing), new PropertyMetadata(20.00, DashHeightChanged));
public static readonly DependencyProperty DashWidthProperty = DependencyProperty.Register("DashWidth",
typeof(double), typeof(StatusRing), new PropertyMetadata(5.00, DashWidthChanged));
public static readonly DependencyProperty DashFillProperty = DependencyProperty.Register("DashFill",
typeof(SolidColorBrush), typeof(StatusRing), new PropertyMetadata(Brushes.DimGray, DashFillChanged));
public static readonly DependencyProperty DashAccentFillProperty = DependencyProperty.Register("DashAccentFill",
typeof(SolidColorBrush), typeof(StatusRing), new PropertyMetadata(Brushes.White, DashAnimationFillChanged));
public static readonly DependencyProperty TailSizeProperty = DependencyProperty.Register("TailSize",
typeof(int), typeof(StatusRing), new PropertyMetadata(10, TailSizeChanged));
public static readonly DependencyProperty AnimationSpeedProperty = DependencyProperty.Register("AnimationSpeed",
typeof(double), typeof(StatusRing), new PropertyMetadata(50.00, AnimationSpeedChanged));
public static readonly DependencyProperty IsPlayingProperty = DependencyProperty.Register("IsPlaying",
typeof(bool), typeof(StatusRing), new PropertyMetadata(false, IsPlayingChanged));
#endregion Dependency Property registrations
private readonly Storyboard glowAnimationStoryBoard = new Storyboard();
public StatusRing()
{
Loaded += OnLoaded;
InitializeComponent();
}
#region Dependency Properties
public int Dashes
{
get => (int)GetValue(DashesProperty);
set => SetValue(DashesProperty, value);
}
public double Diameter
{
get => (double)GetValue(DiameterProperty);
set => SetValue(DiameterProperty, value);
}
public double Radius => Diameter / 2;
public double DashHeight
{
get => (double)GetValue(DashHeightProperty);
set => SetValue(DashHeightProperty, value);
}
public double DashWidth
{
get => (double)GetValue(DashWidthProperty);
set => SetValue(DashWidthProperty, value);
}
public Brush DashFill
{
get => (SolidColorBrush)GetValue(DashFillProperty);
set => SetValue(DashFillProperty, value);
}
public Brush DashAccentFill
{
get => (SolidColorBrush)GetValue(DashAccentFillProperty);
set => SetValue(DashAccentFillProperty, value);
}
public int TailSize
{
get => (int)GetValue(TailSizeProperty);
set => SetValue(TailSizeProperty, value);
}
public double AnimationSpeed
{
get => (double)GetValue(AnimationSpeedProperty);
set => SetValue(AnimationSpeedProperty, value);
}
public bool IsPlaying
{
get => (bool)GetValue(IsPlayingProperty);
set => SetValue(IsPlayingProperty, value);
}
#endregion Dependency Properties
private void OnLoaded(object sender, RoutedEventArgs e)
{
var thisControl = sender as StatusRing;
Recreate(thisControl);
}
#region Dependency Property callbacks
private static void DashesChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var thisControl = d as StatusRing;
Recreate(thisControl);
}
private static void DiameterChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var thisControl = d as StatusRing;
Recreate(thisControl);
}
private static void DashHeightChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var thisControl = d as StatusRing;
Recreate(thisControl);
}
private static void DashWidthChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var thisControl = d as StatusRing;
Recreate(thisControl);
}
private static void DashFillChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var thisControl = d as StatusRing;
Recreate(thisControl);
}
private static void DashAnimationFillChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var thisControl = d as StatusRing;
Recreate(thisControl);
}
private static void TailSizeChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var thisControl = d as StatusRing;
Recreate(thisControl);
}
private static void AnimationSpeedChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var thisControl = d as StatusRing;
if (thisControl.IsLoaded)
{
thisControl.glowAnimationStoryBoard.Stop();
thisControl.glowAnimationStoryBoard.Children.Clear();
ApplyAnimations(thisControl);
thisControl.glowAnimationStoryBoard.Begin();
}
}
private static void IsPlayingChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var thisControl = d as StatusRing;
if (thisControl.IsLoaded)
{
var isPlaying = (bool)e.NewValue;
if (isPlaying)
{
thisControl.glowAnimationStoryBoard.Begin();
}
else
{
thisControl.glowAnimationStoryBoard.Stop();
}
}
}
#endregion Dependency Property callbacks
private static void Recreate(StatusRing thisControl)
{
if (thisControl.IsLoaded)
{
thisControl.glowAnimationStoryBoard.Stop();
thisControl.glowAnimationStoryBoard.Children.Clear();
thisControl.RootCanvas.Children.Clear();
Validate(thisControl);
BuildRing(thisControl);
ApplyAnimations(thisControl);
if (thisControl.IsPlaying)
{
thisControl.glowAnimationStoryBoard.Begin();
}
else
{
thisControl.glowAnimationStoryBoard.Stop();
}
}
}
private static void Validate(StatusRing thisControl)
{
if (thisControl.TailSize > thisControl.Dashes)
{
throw new Exception("TailSize cannot be larger than amount of dashes");
}
}
private static void BuildRing(StatusRing thisControl)
{
var angleStep = (double)360 / thisControl.Dashes;
for (double i = 0; i < 360; i = i + angleStep)
{
var rect = new Rectangle
{
Fill = thisControl.DashFill,
Height = thisControl.DashHeight,
Width = thisControl.DashWidth
};
//Rotate dash to follow circles circumference
var centerY = thisControl.Radius;
var centerX = thisControl.DashWidth / 2;
var rotateTransform = new RotateTransform(i, centerX, centerY);
rect.RenderTransform = rotateTransform;
var offset = thisControl.Radius - thisControl.DashWidth / 2;
rect.SetValue(Canvas.LeftProperty, offset);
thisControl.RootCanvas.Children.Add(rect);
}
thisControl.RootCanvas.Width = thisControl.Diameter;
thisControl.RootCanvas.Height = thisControl.Diameter;
}
private static void ApplyAnimations(StatusRing thisControl)
{
var baseColor = ((SolidColorBrush)thisControl.DashFill).Color;
var animatedColor = ((SolidColorBrush)thisControl.DashAccentFill).Color;
var dashes = thisControl.RootCanvas.Children.OfType<Rectangle>().ToList();
double animationPeriod = thisControl.AnimationSpeed;
double glowDuration = animationPeriod * thisControl.TailSize;
for (int i = 0; i < dashes.Count; i++)
{
var beginTime = TimeSpan.FromMilliseconds(animationPeriod * i);
var colorAnimation = new ColorAnimationUsingKeyFrames
{
BeginTime = beginTime,
RepeatBehavior = RepeatBehavior.Forever
};
var toFillColor = new LinearColorKeyFrame(animatedColor, TimeSpan.Zero);
colorAnimation.KeyFrames.Add(toFillColor);
var dimToBase = new LinearColorKeyFrame(baseColor, TimeSpan.FromMilliseconds(glowDuration));
colorAnimation.KeyFrames.Add(dimToBase);
var restingTime = animationPeriod * dashes.Count;
var delay = new LinearColorKeyFrame(baseColor, TimeSpan.FromMilliseconds(restingTime));
colorAnimation.KeyFrames.Add(delay);
Storyboard.SetTarget(colorAnimation, dashes[i]);
Storyboard.SetTargetProperty(colorAnimation, new PropertyPath("(Fill).(SolidColorBrush.Color)"));
thisControl.glowAnimationStoryBoard.Children.Add(colorAnimation);
}
}
}
状态环.xaml:
<UserControl x:Class="WpfPlayground.StatusRing"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<Canvas x:Name="RootCanvas" />
用法:
<local:StatusRing Diameter="250"
Dashes="32"
TailSize="16"
IsPlaying="True" />
结果:
短划线的数量、动画的长度和速度等......都是可配置的。依赖属性的命名可能会更好......
享受 :-)
关于c# - WPF 创建单个 block 的虚线椭圆,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41746734/
最近,我在各种俄罗斯Web 2.0网站中看到了点缀和虚线超链接的广泛使用。通常,此类链接(在其下方具有虚线或虚线,而不是普通的实线)不会将用户引导至另一页面,而是在同一页面上执行操作而不重新加载该页面
Google 没有帮助我找到问题的解决方案。 (据我所知...)。 我想知道是否可以在 Android 上画一 strip 有 9 个补丁功能的虚线。 我的目标是从一个布局到另一个布局画一条虚线。 我
有没有办法将多条线段视为一条线? IE:我将鼠标悬停在一个上,两个都突出显示,切换图例中的可见性将隐藏两个部分。 http://jsfiddle.net/rayholland/HSvBj/2/ ser
我在我的 C# WinForms 应用程序中使用 .net 4.0 的图表控件。我有两个系列的数据显示为折线图。 我绘制的基本上是作为时间函数的供求关系图。我希望需求是某种颜色的实线,供应是相同颜色的
如何在窗口调整大小期间避免线划线调整大小?考虑下图: http://leprastuff.ru/data/img/20130315/b83eea4a7a3f07ca53a0e118ddbb9230.G
我正在尝试使用纯 webgl 创建虚线。我知道这已经有一个问题,也许我很笨,但我不知道如何让它发挥作用。我理解这个概念,但我不知道如何在着色器中获取沿路径的距离。以前的答案有以下行: varying
我们应该在序列图中的哪些步骤中使用返回线? )没有返回箭头,因为它们隐式返回实例化对象 编辑 2 针对您更新的问题: 我不会有用户操作的返回箭头,例如 login(),因为结果不会以与对象相同的方式
我正在尝试使用 gnuplot v4.4 绘制一个包含虚线和连续线的图形。代码是: set term postscript eps enhanced color set style line 1 li
我正在尝试创建一个 React nivo 折线图,其中包含虚线而不是实线。我研究过图案,但不知道如何制作图案。感谢您的帮助。 最佳答案 nivo 在库中提供了自定义图层功能,您可以使用它来自定义从实线
我正在尝试创建一个 React nivo 折线图,其中包含虚线而不是实线。我研究过图案,但不知道如何制作图案。感谢您的帮助。 最佳答案 nivo 在库中提供了自定义图层功能,您可以使用它来自定义从实线
我使用一些通过的点创建虚线 UIBezierPath。 let pathLayer = CAShapeLayer() pathLayer.strokeColor = UIColor.blue.cgCo
我有以下问题。我必须从很多距离太近的点画一个圆。您可以在下面的 jsfiddle 链接中看到它: http://jsfiddle.net/L6e5oz3L/
我是 CSS 的新手,正在网上寻找自动重新压缩图像的代码,我发现的代码可以完美地做到这一点。但正确的是,它重新调整图像周围的一些红色虚线,当我尝试编辑时,整个图像消失了。可以请有人帮我解决图像显示时如
已将 Firebase Analytics 集成到我的 Android 项目中,它上个月运行正常,现在它只显示虚线并且用户数为 0。 不确定为什么会这样,我哪里错了?由于它之前工作正常,我相信我已经按
我正在使用 OpenGl ES 1.0 开发我的 Android 游戏,我想绘制虚线现在我使用这段代码来画我的线: gl.glColor4f(1.0f, 0.0f, 0.0f, 1.0f); // g
我正在尝试绘制 1 像素的虚线,但它总是绘制 2 像素的线。当前解决方案: let shapelayer = CAShapeLayer() let path = UIBezierPath() path
我这里有一个用 html 编码的菜单,但我需要一条虚线来跨越名称和价格,我将如何在这里做呢?我有点迷路了哈哈。 你可以在这里看到它。 http://mystycs.com/menu/menuifram
是否可以在 Chart.js 折线图上制作虚线?并使图表全宽?见附件样机。 这是我当前的代码(只是简单的例子): var ctx = document.getElementById("main
如何删除 JTabbedPane 上当前选定选项卡周围的虚线。 例如: 看到它周围的虚线了吗? 最佳答案 我刚刚找到了一个更好的方法: component.setFocusable(false); 关
我正在尝试使用 rgl 绘制一些 3d 形状,但我想使用虚线/虚线连接我的点。我怎样才能做到这一点?目前我有 require(rgl) p1 <- c(0,0,0) p2 <- c(1,0,0) p3
我是一名优秀的程序员,十分优秀!