Valeurs de points relatives de la polyligne WPF et étirement pour dessiner un graphique
https://stackoverflow.com/questions/1709945
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
J'essaie de créer un composant graphique assez simple composé d'une série de polylignes dans la même cellule de grille qui représentent les lignes du graphique.Ma stratégie consiste à examiner tous les points de mon ensemble, à déterminer le minimum et le maximum, puis à calculer un nombre compris entre 0 et 1 en conséquence et à utiliser Stretch="Fill" pour étirer chaque polyligne afin de remplir la cellule de la grille.Mon effet souhaité serait qu'un point à 0,.5 soit verticalement au centre de la cellule, mais en réalité la polyligne s'étire verticalement pour remplir toute la cellule en fonction de la valeur Y min et max.Par exemple.si 0,5 est mon maximum et 0,7 est mon minimum dans la polyligne, alors 0,5 sera clair en haut de la cellule et 0,7 sera clair en bas, plutôt que 0,5 au centre et 0,7 7/10 à le fond.
Voici un exemple simple avec deux polylignes et des points calculés entre 0 et 1.Vous remarquerez que la polyligne rouge est directement au-dessus de la polyligne bleue, même si les valeurs Y rouges sont plus grandes.La polyligne rouge doit ressembler à la polyligne bleue, mais être orientée légèrement plus bas dans la cellule.Cependant, il est étiré pour remplir toute la cellule et se trouve donc directement au-dessus du bleu.
<Window x:Class="Test.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="100" Width="300">
<Grid>
<Polyline
Stretch="Fill"
Stroke="Blue"
Points="0,0 0.2,0 0.2,0.363636363636364 0.4,0.363636363636364 0.4,0.636363636363636 0.6,0.636363636363636 0.6,0.0909090909090909 0.8,0.0909090909090909 0.8,0 1,0" />
<Polyline
Stretch="Fill"
Stroke="Red"
Points="0,0.363636363636364 0.2,0.363636363636364 0.2,0.727272727272727 0.4,0.727272727272727 0.4,1 0.6,1 0.6,0.454545454545455 0.8,0.454545454545455 0.8,0.363636363636364 1,0.363636363636364" />
</Grid>
La raison pour laquelle j'utilise des valeurs de 0 à 1 est que je souhaite que la largeur et la hauteur de la cellule de la grille soient facilement modifiables, par ex.via un curseur ou quelque chose pour ajuster la hauteur du graphique, ou en faisant glisser la fenêtre plus large pour ajuster la largeur.J'ai donc essayé d'utiliser cette stratégie d'étirement pour y parvenir au lieu de calculer les valeurs des pixels sans étirement.
Des conseils pour y parvenir ?
Merci.
La solution
J'ai eu le même problème parce que je ne pouvais pas trouver un moyen facile à l'échelle de multiples formes. Nous avons fini à l'aide DrawingGroup avec plusieurs GeometryDrawing à l'intérieur. Ils ont donc échelle ensemble. Voici vos graphiques avec cette approche. On dirait encombrant mais devrait fonctionner rapidement. De plus, vous aurez plus de chances peuplez segments de ligne de code:
<Window x:Class="Polyline.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="100" Width="300">
<Grid>
<Image>
<Image.Source>
<DrawingImage>
<DrawingImage.Drawing>
<DrawingGroup>
<GeometryDrawing Brush="Transparent">
<GeometryDrawing.Geometry>
<RectangleGeometry Rect="0,0,1,1">
<RectangleGeometry.Transform>
<ScaleTransform ScaleX="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=Grid}}"
ScaleY="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType=Grid}}"/>
</RectangleGeometry.Transform>
</RectangleGeometry>
</GeometryDrawing.Geometry>
</GeometryDrawing>
<GeometryDrawing>
<GeometryDrawing.Pen>
<Pen Brush="Blue" Thickness="1"/>
</GeometryDrawing.Pen>
<GeometryDrawing.Geometry>
<PathGeometry>
<PathGeometry.Transform>
<ScaleTransform ScaleX="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=Grid}}"
ScaleY="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType=Grid}}"/>
</PathGeometry.Transform>
<PathGeometry.Figures>
<PathFigure StartPoint="0,0">
<PathFigure.Segments>
<LineSegment Point="0.2,0"/>
<LineSegment Point="0.2,0.363636363636364"/>
<LineSegment Point="0.4,0.363636363636364"/>
<LineSegment Point="0.4,0.636363636363636"/>
<LineSegment Point="0.6,0.636363636363636"/>
<LineSegment Point="0.6,0.0909090909090909"/>
<LineSegment Point="0.8,0.0909090909090909"/>
<LineSegment Point="0.8,0"/>
<LineSegment Point="1,0"/>
</PathFigure.Segments>
</PathFigure>
</PathGeometry.Figures>
</PathGeometry>
</GeometryDrawing.Geometry>
</GeometryDrawing>
<GeometryDrawing>
<GeometryDrawing.Pen>
<Pen Brush="Red" Thickness="1"/>
</GeometryDrawing.Pen>
<GeometryDrawing.Geometry>
<PathGeometry>
<PathGeometry.Transform>
<ScaleTransform ScaleX="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=Grid}}"
ScaleY="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType=Grid}}"/>
</PathGeometry.Transform>
<PathGeometry.Figures>
<PathFigure StartPoint="0,0.363636363636364">
<PathFigure.Segments>
<LineSegment Point="0.2,0.363636363636364"/>
<LineSegment Point="0.2,0.727272727272727"/>
<LineSegment Point="0.4,0.727272727272727"/>
<LineSegment Point="0.4,1"/>
<LineSegment Point="0.6,1"/>
<LineSegment Point="0.6,0.454545454545455"/>
<LineSegment Point="0.8,0.454545454545455"/>
<LineSegment Point="0.8,0.363636363636364"/>
<LineSegment Point="1,0.363636363636364"/>
</PathFigure.Segments>
</PathFigure>
</PathGeometry.Figures>
</PathGeometry>
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingGroup>
</DrawingImage.Drawing>
</DrawingImage>
</Image.Source>
</Image>
</Grid>
</Window>
Vous pouvez supprimer d'abord RectangleGeometry si vous n'avez pas besoin de graphiques échelle toujours entre 0 et 1.
Autres conseils
J'ai rencontré ce problème il y a quelque temps.A l’époque j’ai trouvé la solution proposée par repka mais j’en étais insatisfait car elle était relativement complexe et pas aussi efficace que je l’aurais souhaité.
J'ai résolu le problème en codant un ensemble de simples Classes de forme de boîte de visualisation qui fonctionne exactement comme celui intégré Path, Line, Polyline, et Polygon cours, sauf qu'ils facilitent les étirements pour travailler comme vous le souhaitez.
Mes classes sont ViewboxPath, ViewboxLine, ViewboxPolyline et ViewboxPolygon, et ils sont utilisés comme ceci :
<edf:ViewboxPolyline
Viewbox="0 0 1 1" <!-- Actually the default, can be omitted -->
Stretch="Fill" <!-- Also default, can be omitted -->
Stroke="Blue"
Points="0,0 0.2,0 0.2,0.3 0.4,0.3" />
<edf:ViewboxPolygon
Viewbox="0 0 10 10"
Stroke="Blue"
Points="5,0 10,5 5,10 0,5" />
<edf:ViewboxPath
Viewbox="0 0 10 10"
Stroke="Blue"
Data="M10,5 L4,4 L5,10" />
Comme vous pouvez le constater, mon Classes de forme de boîte de visualisation sont utilisés comme des formes normales (Polyline, Polygon, Path et Line) sauf le supplément Viewbox paramètre, et le fait qu'ils sont par défaut sur Stretch="Fill".Le paramètre Viewbox spécifie, dans le système de coordonnées utilisé pour spécifier la forme, la zone de la géométrie qui doit être étirée à l'aide de Fill, Uniform ou UniformToFill paramètres, au lieu d'utiliser Geometry.GetBounds.
Cela donne un contrôle très précis sur l’étirement et permet d’aligner facilement des formes distinctes les unes avec les autres.
Voici le code réel de mon Classes de forme de boîte de visualisation, y compris la classe de base abstraite ViewboxShape qui contient des fonctionnalités communes :
public abstract class ViewboxShape : Shape
{
Matrix _transform;
Pen _strokePen;
Geometry _definingGeometry;
Geometry _renderGeometry;
static ViewboxShape()
{
StretchProperty.OverrideMetadata(typeof(ViewboxShape), new FrameworkPropertyMetadata
{
AffectsRender = true,
DefaultValue = Stretch.Fill,
});
}
// The built-in shapes compute stretching using the actual bounds of the geometry.
// ViewBoxShape and its subclasses use this Viewbox instead and ignore the actual bounds of the geometry.
public Rect Viewbox { get { return (Rect)GetValue(ViewboxProperty); } set { SetValue(ViewboxProperty, value); } }
public static readonly DependencyProperty ViewboxProperty = DependencyProperty.Register("Viewbox", typeof(Rect), typeof(ViewboxShape), new UIPropertyMetadata
{
DefaultValue = new Rect(0,0,1,1),
});
// If defined, replaces all the Stroke* properties with a single Pen
public Pen Pen { get { return (Pen)GetValue(PenProperty); } set { SetValue(PenProperty, value); } }
public static readonly DependencyProperty PenProperty = DependencyProperty.Register("Pen", typeof(Pen), typeof(ViewboxShape));
// Subclasses override this to define geometry if caching is desired, or just override DefiningGeometry
protected virtual Geometry ComputeDefiningGeometry()
{
return null;
}
// Subclasses can use this PropertyChangedCallback for properties that affect the defining geometry
protected static void OnGeometryChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
{
var shape = sender as ViewboxShape;
if(shape!=null)
{
shape._definingGeometry = null;
shape._renderGeometry = null;
}
}
// Compute viewport from box & constraint
private Size ApplyStretch(Stretch stretch, Rect box, Size constraint)
{
double uniformScale;
switch(stretch)
{
default:
return new Size(box.Width, box.Height);
case Stretch.Fill:
return constraint;
case Stretch.Uniform:
uniformScale = Math.Min(constraint.Width / box.Width, constraint.Height / box.Height);
break;
case Stretch.UniformToFill:
uniformScale = Math.Max(constraint.Width / box.Width, constraint.Height / box.Height);
break;
}
return new Size(uniformScale * box.Width, uniformScale * box.Height);
}
protected override Size MeasureOverride(Size constraint)
{
// Clear pen cache if settings have changed
if(_strokePen!=null)
if(Pen!=null)
_strokePen = null;
else
if(_strokePen.Thickness != StrokeThickness ||
_strokePen.Brush != Stroke ||
_strokePen.StartLineCap != StrokeStartLineCap ||
_strokePen.EndLineCap != StrokeEndLineCap ||
_strokePen.DashCap != StrokeDashCap ||
_strokePen.LineJoin != StrokeLineJoin ||
_strokePen.MiterLimit != StrokeMiterLimit ||
_strokePen.DashStyle.Dashes != StrokeDashArray ||
_strokePen.DashStyle.Offset != StrokeDashOffset)
_strokePen = null;
_definingGeometry = null;
_renderGeometry = null;
return ApplyStretch(Stretch, Viewbox, constraint);
}
protected override Size ArrangeOverride(Size availableSize)
{
Stretch stretch = Stretch;
Size viewport;
Matrix transform;
// Compute new viewport and transform
if(stretch==Stretch.None)
{
viewport = availableSize;
transform = Matrix.Identity;
}
else
{
Rect box = Viewbox;
viewport = ApplyStretch(stretch, box, availableSize);
double scaleX = viewport.Width / box.Width;
double scaleY = viewport.Height / box.Height;
transform = new Matrix(scaleX, 0, 0, scaleY, -box.Left * scaleX, -box.Top * scaleY);
}
if(_transform!=transform)
{
_transform = transform;
_renderGeometry = null;
InvalidateArrange();
}
return viewport;
}
protected Pen PenOrStroke
{
get
{
if(Pen!=null)
return Pen;
if(_strokePen==null)
_strokePen = new Pen
{
Thickness = StrokeThickness,
Brush = Stroke,
StartLineCap = StrokeStartLineCap,
EndLineCap = StrokeEndLineCap,
DashCap = StrokeDashCap,
LineJoin = StrokeLineJoin,
MiterLimit = StrokeMiterLimit,
DashStyle =
StrokeDashArray.Count==0 && StrokeDashOffset==0 ? DashStyles.Solid :
new DashStyle(StrokeDashArray, StrokeDashOffset),
};
return _strokePen;
}
}
protected Matrix Transform
{
get
{
return _transform;
}
}
protected override Geometry DefiningGeometry
{
get
{
if(_definingGeometry==null)
_definingGeometry = ComputeDefiningGeometry();
return _definingGeometry;
}
}
protected Geometry RenderGeometry
{
get
{
if(_renderGeometry==null)
{
Geometry defining = DefiningGeometry;
if(_transform==Matrix.Identity || defining==Geometry.Empty)
_renderGeometry = defining;
else
{
Geometry geo = defining.CloneCurrentValue();
if(object.ReferenceEquals(geo, defining)) geo = defining.Clone();
geo.Transform = new MatrixTransform(
geo.Transform==null ? _transform : geo.Transform.Value * _transform);
_renderGeometry = geo;
}
}
return _renderGeometry;
}
}
protected override void OnRender(DrawingContext drawingContext)
{
drawingContext.DrawGeometry(Fill, PenOrStroke, RenderGeometry);
}
}
[ContentProperty("Data")]
public class ViewboxPath : ViewboxShape
{
public Geometry Data { get { return (Geometry)GetValue(DataProperty); } set { SetValue(DataProperty, value); } }
public static readonly DependencyProperty DataProperty = DependencyProperty.Register("Data", typeof(Geometry), typeof(ViewboxPath), new UIPropertyMetadata
{
DefaultValue = Geometry.Empty,
PropertyChangedCallback = OnGeometryChanged,
});
protected override Geometry DefiningGeometry
{
get { return Data ?? Geometry.Empty; }
}
}
public class ViewboxLine : ViewboxShape
{
public double X1 { get { return (double)GetValue(X1Property); } set { SetValue(X1Property, value); } }
public double X2 { get { return (double)GetValue(X2Property); } set { SetValue(X2Property, value); } }
public double Y1 { get { return (double)GetValue(Y1Property); } set { SetValue(Y1Property, value); } }
public double Y2 { get { return (double)GetValue(Y2Property); } set { SetValue(Y2Property, value); } }
public static readonly DependencyProperty X1Property = DependencyProperty.Register("X1", typeof(double), typeof(ViewboxLine), new FrameworkPropertyMetadata { PropertyChangedCallback = OnGeometryChanged, AffectsRender = true });
public static readonly DependencyProperty X2Property = DependencyProperty.Register("X2", typeof(double), typeof(ViewboxLine), new FrameworkPropertyMetadata { PropertyChangedCallback = OnGeometryChanged, AffectsRender = true });
public static readonly DependencyProperty Y1Property = DependencyProperty.Register("Y1", typeof(double), typeof(ViewboxLine), new FrameworkPropertyMetadata { PropertyChangedCallback = OnGeometryChanged, AffectsRender = true });
public static readonly DependencyProperty Y2Property = DependencyProperty.Register("Y2", typeof(double), typeof(ViewboxLine), new FrameworkPropertyMetadata { PropertyChangedCallback = OnGeometryChanged, AffectsRender = true });
protected override Geometry ComputeDefiningGeometry()
{
return new LineGeometry(new Point(X1, Y1), new Point(X2, Y2));
}
}
[ContentProperty("Points")]
public class ViewboxPolyline : ViewboxShape
{
public ViewboxPolyline()
{
Points = new PointCollection();
}
public PointCollection Points { get { return (PointCollection)GetValue(PointsProperty); } set { SetValue(PointsProperty, value); } }
public static readonly DependencyProperty PointsProperty = DependencyProperty.Register("Points", typeof(PointCollection), typeof(ViewboxPolyline), new FrameworkPropertyMetadata
{
PropertyChangedCallback = OnGeometryChanged,
AffectsRender = true,
});
public FillRule FillRule { get { return (FillRule)GetValue(FillRuleProperty); } set { SetValue(FillRuleProperty, value); } }
public static readonly DependencyProperty FillRuleProperty = DependencyProperty.Register("FillRule", typeof(FillRule), typeof(ViewboxPolyline), new FrameworkPropertyMetadata
{
DefaultValue = FillRule.EvenOdd,
PropertyChangedCallback = OnGeometryChanged,
AffectsRender = true,
});
public bool CloseFigure { get { return (bool)GetValue(CloseFigureProperty); } set { SetValue(CloseFigureProperty, value); } }
public static readonly DependencyProperty CloseFigureProperty = DependencyProperty.Register("CloseFigure", typeof(bool), typeof(ViewboxPolyline), new FrameworkPropertyMetadata
{
DefaultValue = false,
PropertyChangedCallback = OnGeometryChanged,
AffectsRender = true,
});
protected override Geometry ComputeDefiningGeometry()
{
PointCollection points = Points;
if(points.Count<2) return Geometry.Empty;
var geometry = new StreamGeometry { FillRule = FillRule };
using(var context = geometry.Open())
{
context.BeginFigure(Points[0], true, CloseFigure);
context.PolyLineTo(Points.Skip(1).ToList(), true, true);
}
return geometry;
}
}
public class ViewboxPolygon : ViewboxPolyline
{
static ViewboxPolygon()
{
CloseFigureProperty.OverrideMetadata(typeof(ViewboxPolygon), new FrameworkPropertyMetadata
{
DefaultValue = true,
});
}
}
Apprécier!
