Canvas中鼠标获取元素并拖动技术

Silverlight拖动,需要Canvas。

Canvas管网定义:

定义一个区域,在该区域中可以使用相对于该区域的坐标显式定位子元素。

XAML

<Canvas   ...>
  oneOrMoreUIElements
</Canvas>
-or-
<Canvas   .../>

XAML 值



描述


oneOrMoreUIElements


UIElement 对象派生的以下对象元素中的一个或多个:Border (Silverlight 2)、CanvasEllipseGlyphsGrid (Silverlight 2)、ImageInkPresenterLineMediaElementPasswordBox (Silverlight 2)、PathPolygonPolylineRectangleShapeStackPanel (Silverlight 2)、TextBlockTextBox (Silverlight 2)。 当脚本在运行时访问 Children 属性时,此处定义的对象元素将成为 Children 集合的成员。

Canvas作用:

在 Silverlight 的 JavaScript API 中,Canvas 对象通常为 XAML 的根元素,此 XAML 为 Silverlight 插件的 Source 属性。

Canvas 可以包含子元素,这些子元素呈现在 Canvas 区域中。 每个子元素都必须为一个 UIElement。 在 XAML 中,将子元素声明为充当 Canvas 对象元素的内部 XML 的对象元素。

在脚本中,可以通过获取由 Children 属性访问的集合来操作 Canvas 子对象的集合。

由于 Canvas 为 UIElement 类型,因此可以嵌套 Canvas 元素。

很多情况下,Canvas 仅仅用作其他对象的容器,而没有任何可见属性。 如果满足下面的一个或多个条件,Canvas 即不可见:

  • Height 属性等于 0。
  • Width 属性等于 0。
  • Background 属性等于 null。
  • Opacity 属性等于 0。
  • Visibility 属性等于 Collapsed。
  • Canvas 的某个上级对象不可见。

在 Silverlight 的 JavaScript API 中,键盘事件仅对根元素或可设定焦点的控件(TextBoxPasswordBox)可用。 Canvas 是一个典型的根元素,所以通常是具有键事件处理的公共对象。

学习实现一个拖动对象效果:

我们在xaml文件中的根元素放置一个Canvas,在Canvas的子元素中放置一个Rectangle

要想实现拖动,我们需要做的事情有:

  • 1,当鼠标在该对象上边按下时,获取到该元素,并标记鼠标已经按下;
  • 2,当已经标记为按下,且还未释放鼠标之前,有任何拖动我们都要把选中的对象的位置坐变动;
  • 3,当鼠标释放,当鼠标释放的时候,我们需要把标记鼠标已按下的标记取消,同时释放鼠标。

从上边的分析知道,我们需要一些赋值的标记,和鼠标位置跟踪标记元素

鼠标按下事件:

鼠标移动事件:

鼠标释放事件:

时间: 2024-11-08 23:44:14

Canvas中鼠标获取元素并拖动技术的相关文章

点击鼠标获取元素ID

原文:点击鼠标获取元素ID public partial class Form1 : Form { public Form1() { InitializeComponent(); } private mshtml.HTMLDocument doc = null; private void Form1_Load_1(object sender, EventArgs e) { txtRecord.Items.Add("start..."); txtRecord.Items.Add(&quo

JS中如何获取元素

1.通过ID名称来获取元素: document get element by id 'link' document.getElementById('link'); 事件:鼠标事件.键盘事件.系统事件.表单事件.自定义事件 例:onclick 鼠标点击事件 onmouseover 鼠标移入事件 onmouseout 鼠标移出事件 如何添加事件: 元素.事件 (元素.onmouseover) 函数:可以理解为-命令,做一些事... function(函数的关键词) 语法: function abc(

使用python处理selenium中的获取元素属性问题

# 获取我的订单元素class属性值 at = self.driver.find_element_by_link_text('我的订单').get_attribute('class') # 判断classs属性值是否为active self.assertEqual(at,u'active')

Qwt中鼠标获取坐标点

1 void getPoint(QwtPlot *plot) 2 { 3 QPoint point = plot->canvas()->mapFromGlobal(QCursor::pos()); 4 QString info.sprintf("x = %g, y = %g", 5 plot ->invTransFrom(Qwtplot::xBottom,point.x()), 6 plot ->invTransFrom(Qwtplot::yLeft,point

解析JQuery中css()方法,获取元素CSS值之getComputedStyle方法(转载,写的很好)

一.碎碎念~前言 我们都用过jQuery的CSS()方法,其底层运作就应用了getComputedStyle以及getPropertyValue方法. 对于那些只想混口饭吃的人来讲,晓得CSS()如何使用就足够了.对于希望在JS道路上越走越远的来人说,简单了解一些JS库底层实现对自己的学习很有帮助.可能谈不上信手拈来的使用,至少对创造一些创意新颖的新技术拓宽了思路. jQuery为何受欢迎,其中原因之一就是方法名称比较短.好比打架一样,块头大的潜意识认为厉害,就不由得心生畏惧,退避三舍:小个子(

jquery 获取鼠标和元素的坐标点

获取当前鼠标相对img元素的坐标 $('div').mousemove(function(e) { varpositionX=e.pageX-$(this).offset().left; //获取当前鼠标相对div的X坐标 varpositionY=e.pageY-$(this).offset().top; //获取当前鼠标相对div的Y坐标 console.log(positionX+' '+positionY); }) 获取当前鼠标相对浏览器的原点的坐标 $('div').mousemove

获取元素样式对象 页面滚出 页面可是大小 添加监听事件 获取事件参数浏览器中位置 的兼容

/** * 获取浏览滚动出去的距离 * @returns {{scrollY: (Number|number), scrollX: (Number|number)}} */function scroll(){ return{ scrollY:window.scrollY||document.body.scrollTop||document.documentElement.scrollTop||0, scrollX:window.scrollX||document.body.scrollLeft|

获取元素在页面中left,top值(忽略其父级的定位)

函数用到的属性有: element.offsetLeft 返回当前元素的相对水平偏移位置的偏移容器 element.offsetParent 返回元素的偏移容器 element.offsetTop 返回当前元素的相对垂直偏移位置的偏移容器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</ti

获取JS数组中的相同元素的名称和数量

Js代码   <script> var ary =["aaa","露露","bbb","aaa","ccc","ccc","aaa","露露","haha"]; var res = []; ary.sort(); for(var i = 0;i<ary.length;) { var count = 0; for