Canvas中鼠标获取元素并拖动技术
Silverlight拖动,需要Canvas。
Canvas管网定义:
定义一个区域,在该区域中可以使用相对于该区域的坐标显式定位子元素。
<Canvas ...>
oneOrMoreUIElements
</Canvas>
-or-
<Canvas .../>
值 |
描述 |
---|---|
oneOrMoreUIElements |
从 UIElement 对象派生的以下对象元素中的一个或多个:Border (Silverlight 2)、Canvas、Ellipse、Glyphs、Grid (Silverlight 2)、Image、InkPresenter、Line、MediaElement、PasswordBox (Silverlight 2)、Path、Polygon、Polyline、Rectangle、Shape、StackPanel (Silverlight 2)、TextBlock、TextBox (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 中,键盘事件仅对根元素或可设定焦点的控件(TextBox、PasswordBox)可用。 Canvas 是一个典型的根元素,所以通常是具有键事件处理的公共对象。
学习实现一个拖动对象效果:
我们在xaml文件中的根元素放置一个Canvas,在Canvas的子元素中放置一个Rectangle
要想实现拖动,我们需要做的事情有:
- 1,当鼠标在该对象上边按下时,获取到该元素,并标记鼠标已经按下;
- 2,当已经标记为按下,且还未释放鼠标之前,有任何拖动我们都要把选中的对象的位置坐变动;
- 3,当鼠标释放,当鼠标释放的时候,我们需要把标记鼠标已按下的标记取消,同时释放鼠标。
从上边的分析知道,我们需要一些赋值的标记,和鼠标位置跟踪标记元素:
鼠标按下事件:
鼠标移动事件:
鼠标释放事件:
Canvas中鼠标获取元素并拖动技术的更多相关文章
- 在canvas中使用html元素
让div悬浮于canvas之上 使用z-index控制层及顺序 慕课网canvas demo <div id="canvas-wrapper"> <canva ...
- 点击鼠标获取元素ID
原文:点击鼠标获取元素ID public partial class Form1 : Form { public Form1() { InitializeComponent(); } private ...
- html中如何获取元素在文档中的位置
html中如何获取元素在文档中的位置 一.总结 一句话总结: $("#elem").offset().top $("#elem").offset().left ...
- JavaScript中的获取元素的方法
通过id获取元素 document.getElementById(id名字) 通过标签获取元素 document/元素.getElementsByTagName(标签名) 通过css选择器获取元素 d ...
- 多级iframe中,获取元素相对于浏览器左上角的坐标(非当前frame)
搜索了好多文章,都不是自己想要的,所以在此贴下自己的解决方案,做个笔记. 1.常规需求:获取当前元素距离左边.顶部的距离 1 var x = $(div).offset().left; 2 var y ...
- 使用python处理selenium中的获取元素属性问题
# 获取我的订单元素class属性值 at = self.driver.find_element_by_link_text('我的订单').get_attribute('class') # 判断cla ...
- vue2.0中怎么获取元素
在元素上添加 v-el:food-wrapper (不用驼峰的写法) vue1版本 报错: vue2版本 (vue2把vue1中的 v-el 改为了 ref vue1 v-el:foods-wrapp ...
- 使用python处理selenium中的获取元素属性
# 获取我的订单元素class属性值 get_class_name = driver.find_element_by_link_text('我的订单').get_attribute('class') ...
- Qwt中鼠标获取坐标点
void getPoint(QwtPlot *plot) { QPoint point = plot->canvas()->mapFromGlobal(QCursor::pos()); Q ...
随机推荐
- IS_POST:判断是否存在POST提交
IS_POST:判断是否存在POST提交 在程序中可以使用IS_POST来做优化..如果有提交.我们再执行下一步动作.节省开销
- 使用无限生命期Session的方法
使用无限生命期Session的方法 [来源] 达内 [编辑] 达内 [时间]2013-03-28 Session储存在服务器端,根据客户端提供的SessionID来得到这个用户的文件,然后读 ...
- 【转载】C编译过程概述
gcc:http://www.cnblogs.com/ggjucheng/archive/2011/12/14/2287738.html#_Toc311642844 gdb:http://www.cn ...
- mysql入门问题
1.给列设置默认时间 在创建表的图形化界面,不能直接用函数sysdate()或者now()来设置默认当前时间,要用sql脚本创建的话就可以 IF NOT EXISTS `tb_1` THENBEGIN ...
- json数据交换
1.1 为什么要进行json数据交互 json数据格式在接口调用中.html页面中较常用,json格式比较简单,解析还比较方便. 比如:webservice接口,传输json数据. 1.2 s ...
- BadgeView的使用介绍
在现在大部分的信息发布类应用,都有这样的一个功能:当后台数据更新,比如有系统消息或者是用户间有互动的时候,通过在控件上显示一个小红点来提示用户有新的信息.一般来说,这种业务需求,我们可以在布局文件中隐 ...
- 【No.1 Ionic】基础环境配置
Node 安装 git clone https://github.com/nodejs/node cd node ./configure make sudo make install node -v ...
- pro7
1.本次课学习到的知识点: 函数的作用 确定函数的功能 定义函数 调用函数 2.实验过程中遇到的问题及解决方法: 定义函数时 变量的定义会出现混乱 通过看例题 多练习 逐渐熟悉 需从数学角度解决问题时 ...
- Scrum 的相关概念
Scrum 的相关概念 4.1 Scrum 的起源 Scrum 是一种灵活的敏捷软件开发管理过程,这个名词来源于英式橄榄球.Scrum方法由Ken Schwaber和Jeff Sutherland ...
- jquery在线手册
开发时用到jquery,有几个函数想不起来怎么用,找了一下jquery在线手册. 记录一下,下回有需要再看看. 链接:http://www.chenfahui.cn/jq/