none
Silverlight中鼠标事件的js开发 RRS feed

  • 常规讨论

  • 在silverlight 中,我们可以通过js事件绑定方法addEventListener,往xaml文件中的UIElement
    元素上绑定事件js事件,也可以通过直接属性赋值的方法来将事件绑定到UIElement元素上,比如下面
    的语法声明:

    <Rectangle x:Name="" MouseEnter="onMouseEnter" />

    本人比较喜欢前者的定义方法,主要是因为其灵活性和支持prototype式的代码结构。下面就通过
    一个获取鼠标当前坐标位置的例子,来说明一下如果使用js事件绑定。

    首先我们需要定义一个Silverlight JScript 文件,并将其命名为MoveScene.xaml,如下图所示:

    这时系统会生成两个文件,一个是同名的MoveScene.xaml,而另一个就是其绑定的js文件:
    MoveScene.js。我们可以将相应的代码放入这两个文件中,其中xaml代码如下:

    <Canvas xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x
    ="http://schemas.microsoft.com/winfx/2006/xaml"
    Width
    ="300" Height="300" x:Name="rootCanvas" Background="pink">

     

    <Ellipse x:Name="MouseEllipse"
    Height
    ="100" Width="100"
    Canvas.Left
    ="30" Canvas.Top="30" Fill="Red"/>

     

    <TextBlock x:Name="Status" Canvas.Top="140" MouseLeftButtonDown="onMouseLeftButtonUp" />
    </Canvas>

    上面代码中定义了两个元素:
    1. Ellipse元素, 名称为:MouseEllipse, 该元素将会绑定鼠标事件。
    2. TextBlock元素,名称为:Status,该元素会显示当前鼠标在MouseEllipse元素中的位置。

    下面就是关于鼠标事件绑定的代码(因系统已为我们生成了一个简单的初始化代码,我们仅需放
    入相应的事件绑定代码即可),取终代码结构如下(MoveScene.js):

    Silverlight_JsWeb.MoveScene = function() 
    {
    }

    Silverlight_JsWeb.MoveScene.prototype

    =
    {

    handleLoad:

    function(plugIn, userContext, rootElement) 
    {
    this.plugIn = plugIn;

     

    // 按钮事件挂钩示例: 查找按钮,然后附加事件处理程序
    var MouseEllipse = rootElement.findName("MouseEllipse"); 

    MouseEllipse.addEventListener(

    "MouseMove", Silverlight.createDelegate(this, this.handleMouseMove));

    MouseEllipse.addEventListener(

    "MouseLeave", Silverlight.createDelegate(this, this.handleMouseLeave));

    MouseEllipse.addEventListener(

    "MouseLeftButtonUp", Silverlight.createDelegate(this, this.handleMouseLeftButtonUp));
    },

     

    // 鼠标移入处理程序
    handleMouseMove: function(sender, mouseEventArgs)
    {
    sender.Fill
    = "Coral";    

     

    var currX = mouseEventArgs.getPosition(null).x;
    var currY = mouseEventArgs.getPosition(null).y;

     

    var Status = sender.findName("Status");
    Status.Text
    = "x:" + currX + " y:" + currY;

    },

     

    // 鼠标离开处理程序
    handleMouseLeave: function(sender, mouseEventArgs)
    {
    sender.Fill
    = "Teal";
    },

     

    // 鼠标左键单击处理程序
    handleMouseLeftButtonUp: function(sender, mouseEventArgs)
    {
    sender.Fill
    = "Blue";
    alert(
    "x:" +mouseEventArgs.getPosition(null).x +
    " y:" +mouseEventArgs.getPosition(null).y);
    }
    }

     

    这里面有两个方法需要着重介绍一下:
    addEventListener 该方法用于向指定的元素绑定相应的方法。其函数声明如下:

    object.AddEventListener(eventName, functionReference)

    其参数:
    eventName表示事件的名称,string类型(如KeyDown等)。
    functionReference ,表示事件处理方法的引用,Object类型(通常采用Silverlight.createDelegate方法创建)。

    该方法的使用已如上面代码所声明的那样:

    MouseEllipse.addEventListener("MouseMove", Silverlight.createDelegate(this, this.handleMouseMove));

    这样我们就将handleMouseMove方法绑定到了MouseEllipse元素的MouseMove事件上。

    另外一个要介绍的方法是FindName,其函数声明如下:

    retval = object.FindName(name)

    其name即是在XAML中元素的名称,它返回该元素的引用(有点像我们经常使用的getElementById).

    通过该方法我们就可以该XMAL中的元素了。

    目前我们只是完成了相应的代码声明工作。仅下面就是创建该silverlight对象的代码(因为要演示三种鼠标应用
    场景,所以这里采用了参数化的方式来简化代码, 文件 CreateSilverlight.js):

    //Instance:实例名称
    //
    Source:资源文件名称
    //
    ParentElement:相应的父元素名称
    //
    PluginID: 插件名称
    function createSilverlight(Instance, Source, ParentElement, PluginID)
    {
    var scene = Instance;

    Silverlight.createObjectEx({
    source: Source,
    parentElement: ParentElement,
    id: PluginID,
    properties: {
    width:

    '300',               
    height:
    '300',              
    version:
    '2.0',             
    isWindowless:
    'true',
    background:
    'aliceblue',
    framerate:
    '24'
    version:
    '2.0'
    },
    events: {
    //注意此处的代码使用方式,它将相应的prototype实例和相应方法
    //绑定到onLoad事件上
    onLoad: Silverlight.createDelegate(scene, scene.handleLoad),
    onError:
    function(sender, args) {
    var errorDiv = document.getElementById("errorLocation");
    if (errorDiv != null) {
    var errorText = args.errorType + "- " + args.errorMessage;

     

    if (args.ErrorType == "ParserError") {
    errorText
    += "<br>File: " + args.xamlFile;
    errorText
    += ", line " + args.lineNumber;
    errorText
    += " character " + args.charPosition;
    }
    else if (args.ErrorType == "RuntimeError") {
    errorText
    += "<br>line " + args.lineNumber;
    errorText
    += " character " + args.charPosition;
    }
    errorDiv.innerHTML
    = errorText;

    }
    },
    initParams:
    null, // 初始化参数
    context:null
    });
    }

     

    到这里我们仅需要在HTM文件中写入下面的js代码,便可创建对象了:

    createSilverlight(new Silverlight_JsWeb.MoveScene(),
    "xaml/MoveScene.xaml",
    document.getElementById(
    "SilverlightControlHost_Move"),
    "MouseMove");

    其运行结果如下图所示:

    上面介绍和鼠标MOVE事件的处理方法。下面介绍一下鼠标元素拖动的方法:

    其JS声明如下(DragAdnDrop.js):

    //通过使用全局变量来记录鼠标的位置和是否停止拖动等信息
    //
    当前是否设置鼠标捕获
    var isMouseCaptured;
    //全局位置变量
    var mouseVerticalPosition;
    var mouseHorizontalPosition;

    Silverlight_JsWeb.DragDrop

    = function() 
    {
    }

    Silverlight_JsWeb.DragDrop.prototype

    =
    {

    handleLoad:

    function(plugIn, userContext, rootElement) 
    {
    this.plugIn = plugIn;

     

    // 按钮事件挂钩示例: 查找按钮,然后附加事件处理程序
    var DragRec = rootElement.findName("DragRec"); 

    DragRec.addEventListener(

    "MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseLeftButtonDown));

    DragRec.addEventListener(

    "MouseMove", Silverlight.createDelegate(this, this.handleMouseMove));

    DragRec.addEventListener(

    "MouseLeftButtonUp", Silverlight.createDelegate(this, this.handleMouseLeftButtonUp));
    },

     

    // 鼠标左键单击处理程序
    handleMouseLeftButtonDown: function(sender, mouseEventArgs)
    {

     

    //获取当前鼠标左键按下的位置
    mouseVerticalPosition = mouseEventArgs.getPosition(null).y;
    mouseHorizontalPosition
    = mouseEventArgs.getPosition(null).x;
    isMouseCaptured
    = true;
    sender.CaptureMouse();  
    },

     

    // 鼠标离开处理程序
    handleMouseMove: function(sender, mouseEventArgs)
    {
    var item = sender;
    if (isMouseCaptured) 
    {

     

    // 计算当前对象的位置.
    var deltaV = mouseEventArgs.getPosition(null).y - mouseVerticalPosition;
    var deltaH = mouseEventArgs.getPosition(null).x - mouseHorizontalPosition;
    var newTop = deltaV + item["Canvas.Top"];
    var newLeft = deltaH + item["Canvas.Left"];

     

    // 对鼠标选中的元素设置新的移动位置.
    item["Canvas.Top"] = newTop;
    item[
    "Canvas.Left"] = newLeft;

     

    // 更新全局位置变量.
    mouseVerticalPosition = mouseEventArgs.getPosition(null).y;
    mouseHorizontalPosition
    = mouseEventArgs.getPosition(null).x;
    }
    },

     

    //鼠标左键松开处理程序
    handleMouseLeftButtonUp: function(sender, mouseEventArgs)
    {
    isMouseCaptured
    = false;

    sender.ReleaseMouseCapture();

    mouseVerticalPosition

    = -1;

    mouseHorizontalPosition

    = -1;
    }

    }

     

    上面代码中有两个方法要说明一下:

    retval = object.CaptureMouse()    

    该方法的调用者object即是支持被拖动的元素,当元素对象支持拖动时,该方法调用返回true   

    与上面方法相对应的是 object.ReleaseMouseCapture(), 它会放弃对当前元素的鼠标捕获操作。

    其最终的运行结果如下:

    前两个DEMO是对鼠标基本事件的操作。下面将会演示一下UIElement的Bubble问题。写过IE脚本的朋
    友应该都会知道这个元素冒泡的问题这个问题有时我们希望发生的,有时即是我们不希望看到了。在XMAL
    中,先声明元素在整个Canvas的最下面,而后声明的元素在最上面。这样当我们将鼠标从上面的元素移入
    到下面的元素时,就会出现下图中所显示的结果(注意在两个元素交叉区域时下方所显示的元素名称):

    因为rect2是在rect1之后声明的,所以在交叉区域显示的是rect2。当然我们可以通过在相应元素中
    设置Canvas.ZIndex 属性来改变这里顺序,如下所示:

    <Rectangle
    x:Name="Rect1"
    Width
    ="100" Height="100"
    Fill
    ="PowderBlue" Canvas.ZIndex="3"/>

     

    <Rectangle
    x:Name="Rect2"
    Canvas.Top
    ="50" Canvas.Left="50"
    Width
    ="100" Height="100"
    Fill
    ="Gold" Opacity="0.5" Canvas.ZIndex="2" />

     

    <Polygon x:Name="Polygon1"
    Points
    ="50,200 150,125 200,275 300,200" Stroke="Purple" StrokeThickness="2" Canvas.ZIndex="1">
    <Polygon.Fill>
    <SolidColorBrush Color="Blue" Opacity="0.4" />
    </Polygon.Fill>
    </Polygon>

     


    这样我们就可以控件鼠标事件的响应顺序了,如下图。

    好了,今天的内容就到这里了。

    源码下载,请点击这里:)

    2009年5月27日 2:58