为什么拖动时画布上的线条形状会漂移? [英] Why is a Line shape on a Canvas drifting away while dragging?

问题描述

我看到一种奇怪的行为，我无法解释在画布上拖动线条形状的行为.线条形状在 Thumb DataTemplate 中，如下所示:

I see a strange behaviour dragging in Line shape over a Canvas that I cannot explain. The Line shape is in a Thumb DataTemplate like so:

<DataTemplate DataType="{x:Type vm:MyLine}">
    <Thumb DragDelta="Thumb_DragDelta">
        <Thumb.Template>
            <ControlTemplate TargetType="Thumb">
                <Line Fill="LightBlue" StrokeThickness="2" Y1="{Binding Y1}" Y2="{Binding Y2}" X1="{Binding X1}" X2="{Binding X2}" Stroke="LightBlue" x:Name="Line"/>
            </ControlTemplate>
        </Thumb.Template>
    </Thumb>
</DataTemplate>

画布是 ListBox 的 ItemsPanelTemplate.在 ListBox.ItemContainerStyle 中没有 Canvas.Top 或 Canvas.Left Binding 或 Setter.宽度和高度也没有绑定.

The Canvas is ItemsPanelTemplate of a ListBox. In the ListBox.ItemContainerStyle there is no Canvas.Top or Canvas.Left Binding or Setter. Also no Binding for Width and Height.

画布上的线条正在拖动，但偏离鼠标位置.相当狂野和快速.

The Line on the Canvs is dragging but it drifts away from the mouse position. Fairly wild and quick.

在代码后面拖拽有效果:

In code behind the dragging has the effect:

line.X1 += e.HorizontalChange; line.X2 += e.HorizontalChange;
line.Y1 += e.VerticalChange; line.Y2 += e.VerticalChange;

X..Y 的 setter 会引发 PropertyChanged 否则 Line 不会移动.

The setters for X..Y raise PropertyChanged otherwise the Line wouldn't move.

我应该如何为 Line 正确拖动行为?为什么?
Binding Mode=OneWay 没有区别.

What should I do for a proper dragging behaviour for Line and why?
Binding Mode=OneWay makes no difference.

推荐答案

事实证明，当添加到 Thumb 时，Line 形状的行为与 Ellipse 形状有些不同.Thumb 在其 DragDelta 事件中触发鼠标 w.r.t.的总位移.拖动开始时左键按下的位置.

It turns out that the Line shape behaves somewhat different from the Ellipse shape when added to a Thumb. The Thumb fires in its DragDelta event the total displacment of the mouse w.r.t. the position where the left button was pressed when the dragging started.

对于椭圆这是可以的，因为在内部，椭圆形状的 EllipseGeometry 被拉伸以填充位于带有 Canvas.Left、Canvas.Top、Width 和 Height 的 Canvas 上的 Rectangle.显然，总位移是在画布上为椭圆拖动设置动画的正确值.

For an ellipse this is ok, because internally, the EllipseGeometry of the Ellipse shape is stretched to fill Rectangle that is positioned on the Canvas with Canvas.Left, Canvas.Top, Width and Height. Apparantly the total displacement is the correct value to animate the dragging of the ellipse on the canvas.

对于线，在画布上为椭圆的拖动设置动画的正确值是两个连续 DragDelta 事件之间的位移差.根据内部LineGeometry 的X1、X2、Y1、Y2 属性绘制一条线.其 GeometryBounds 的 Rectangle 被忽略(尽管该线被剪裁到此边界之外).Line 的 Canvas.Left=Canvas.Top 然后可以设置为 0，Width 和 Height 等于 Canvas 的 ActualHeight 和 ActualWidth.

For a Line the correct value to animate the dragging of the ellipse on the canvas is the difference of the displacement between two consecutive DragDelta events. A Line is drawn on the basis of X1, X2, Y1, Y2 properties of an internal LineGeometry. The Rectangle of its GeometryBounds are ignored (although the line is clipped beyond this border). The Line's Canvas.Left=Canvas.Top can then be set to 0 and Width and Height equal to the ActualHeight and ActualWidth of the Canvas.

还可以创建自己的具有中心和半径属性的椭圆形状.这样的形状就会表现得像线形状.

One could also create an own Ellipse shape with a Center and Radius property. Such a shape then would behave like the Line shape.

我所做的是创建一个 ThumbShape 作为基类，从 MS 的 Thumb.cs 复制代码.因此，我还必须复制相应的 EventArgs 类和 EventHandler 委托.我在 DragDelta 事件参数中添加了一个相对鼠标更改，以便我可以选择是使用拖动的相对偏移还是总偏移.

What I did is create a ThumbShape as a base class, copying code from Thumb.cs of MS. Therfore I also had to copy the corresponding EventArgs classes and EventHandler delegates. I added to the DragDelta eventarguments a relative mouse change so that I can choose whether to use the relative offset or the total offset of the dragging.

这篇关于为什么拖动时画布上的线条形状会漂移?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！