我正在尝试处理拖放交互,其中涉及鼠标按下、鼠标移动和鼠标向上。
这是我的解决方案的简化重现:
- 按下鼠标时,创建一个椭圆并将其添加到画布上
- 鼠标移动时,重新定位椭圆以跟随鼠标
-
鼠标松开时,会更改画布的颜色,以便清楚地看出您正在拖动哪一个。
var mouseDown = Observable.FromEvent<MouseButtonEventArgs>(canvas, "MouseLeftButtonDown");
var mouseUp = Observable.FromEvent<MouseButtonEventArgs>(canvas, "MouseLeftButtonUp");
var mouseMove = Observable.FromEvent<MouseEventArgs>(canvas, "MouseMove");
Ellipse ellipse = null;
var q = from start in mouseDown.Do(x =>
{
// handle mousedown by creating a red ellipse,
// adding it to the canvas at the right position
ellipse = new Ellipse() { Width = 10, Height = 10, Fill = Brushes.Red };
Point position = x.EventArgs.GetPosition(canvas);
Canvas.SetLeft(ellipse, position.X);
Canvas.SetTop(ellipse, position.Y);
canvas.Children.Add(ellipse);
})
from delta in mouseMove.Until(mouseUp.Do(x =>
{
// handle mouse up by making the ellipse green
ellipse.Fill = Brushes.Green;
}))
select delta;
q.Subscribe(x =>
{
// handle mouse move by repositioning ellipse
Point position = x.EventArgs.GetPosition(canvas);
Canvas.SetLeft(ellipse, position.X);
Canvas.SetTop(ellipse, position.Y);
});
XAML 很简单
<Canvas x:Name="canvas"/>
这段代码有一些我不喜欢的地方,我需要帮助重构它:)
首先: mousedown 和 mouseup 回调被指定为副作用。如果有两个订阅q
,它们会发生两次。
二、mouseup回调指定before鼠标移动回调。这使得它有点难以阅读。
第三,对椭圆的引用似乎是在一个愚蠢的地方。如果有两个订阅,该变量引用将很快被覆盖。我确信我们应该有某种方式可以利用let
关键字向 linq 表达式引入一个变量,这意味着正确的椭圆引用可用于鼠标移动和鼠标向上处理程序
你会如何编写这段代码?
为了避免订阅副作用,您应该发布您的可观察值。我认为这样的事情就可以了:
public MainWindow()
{
InitializeComponent();
var mouseDown = Observable
.FromEvent<MouseButtonEventArgs>(this, "MouseLeftButtonDown");
var mouseUp = Observable
.FromEvent<MouseButtonEventArgs>(this, "MouseLeftButtonUp");
var mouseMove = Observable
.FromEvent<MouseEventArgs>(this, "MouseMove");
var ellipses = mouseDown
.Select(args => new {
a = args,
el = new Ellipse
{
Width = 10, Height = 10, Fill = Brushes.Red
}})
.Publish();
ellipses
.Subscribe(elargs =>
{
var position = elargs.a.EventArgs.GetPosition(canvas);
Canvas.SetLeft(elargs.el, position.X);
Canvas.SetTop(elargs.el, position.Y);
canvas.Children.Add(elargs.el);
});
var elmove = from elargs in ellipses
from mm in mouseMove.TakeUntil(mouseUp)
select new { a = mm, el = elargs.el };
elmove.
Subscribe(elargs =>
{
var position = elargs.a.EventArgs.GetPosition(canvas);
Canvas.SetLeft(elargs.el, position.X);
Canvas.SetTop(elargs.el, position.Y);
});
var elmup = from elargs in ellipses
from mup in mouseUp
select elargs.el;
elmup.Subscribe(el => el.Fill = Brushes.Green);
ellipses.Connect();
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)