缩放系列（三）：一个可以手势缩放、拖拽、旋转的layout

【缩放系列（三）：一个可以手势缩放、拖拽、旋转的layout】的更多相关文章

缩放系列（三）：一个可以手势缩放、拖拽、旋转的layout

弄了一个下午,终于搞出来了,PowerfulLayout 下面是一个功能强大的改造的例子: 可以实现以下需求: 1.两个手指进行缩放布局 2.所有子控件也随着缩放, 3.子控件该有的功能不能丢失(像button有可被点击的功能,缩放后不能丢失该功能) 相对上个例子,多了一个功能--- 4.拖拽(平移)layout 运行效果图:http://pan.baidu.com/s/1geIoG8r 图片太大就不贴出来了. 布局文件test.xml.超级简单的 <?xml version="1.0&…

每天一个JavaScript实例-html5拖拽

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-html5拖拽</title> <style> #drop{ width:300px; height:200px; background-…

jQuery 学习笔记3 点击弹出一个div并允许拖拽移动

这里我看了下http://qings.blog.51cto.com/4857138/998878/ 的文章,感谢他的分享. 首先我们有一个a标签和一个div,div默认是不显示的,当用户点击时改为显示. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <h…

canvas 图片拖拽旋转之二——canvas状态保存(save和restore)

引言在上一篇日志“canvas 图片拖拽旋转之一”中,对坐标转换有了比较深入的了解,但是仅仅利用坐标转换实现的拖拽旋转,会改变canvas坐标系的状态,从而影响画布上其他元素的绘制.因此,这个时候需要用到一对canvas方法,在变换坐标系前保存canvas状态,在变换并绘制完成之后,恢复canvas状态,即save()和restore(). [备注] 这篇文章只是记录分享下解决问题的过程,找我要demo的,或者问我什么东西怎么做的,就不要加我了.你可以加一个canvas相关的交流群,或者如果需…

canvas 图片拖拽旋转之一——坐标转换translate

引言对canvas中绘制的图片进行旋转操作,需要使用ctx.translate变换坐标系,将图片旋转的基点设为坐标系的原点,然后ctx.rotate旋转. 这个时候,因为canvas坐标系发生了旋转,而视觉感受上的坐标以及鼠标事件中的坐标都是旋转之前的屏幕坐标系.再根据鼠标的移动去控制canvas中的图片时,就会出现问题. 用A坐标系中的偏移来控制B坐标系中的图形,就需要进行一个坐标转换,即通过一种转换关系,将A坐标系中的点在B坐标系中表示出来,然后根据B坐标系中的偏移来控制B坐标系中的图形.…

ztree使用系列四（ztree实现同级拖拽排序并将排序结果保存数据库）

ztree这个系列的最后一篇,也是ztree功能强大的体现之中的一个--排序功能. ztree能够实现全部节点之间任意的拖拽排序功能.我这里依据须要实现了仅仅同意同级之间任意拖拽排序,事实上原理都一样,仅仅是范围缩小了一些,多了一些推断而已.以下是每一层的代码.还是採取仅仅贴出功能代码.由于这个拖拽排序功能我感觉非常不错,所以单独拿出一篇博客来展示,也方便理解. Jsp页面实现功能的js代码例如以下: //拖拽前运行 var dragId; function beforeDrag(treeId,…

使用TypeScript给Vue 3.0写一个指令实现组件拖拽

最近在用vue3重构后台的一个功能.一个弹窗组件,弹出一个表单.然后点击提交. 早上运维突然跑过来问我,为啥弹窗挡住了下边的表格的数据,我添加的时候,都没法对照表格来看了.你必须给我解决一下. 我参考了一下几大Vue的ui组件库.发现element iview antv.好像都没这个功能.为啥运维需要这个功能?? 但是没办法,只能整一个就是了. 做之前本来想直接做到dialog这个组件中.但是又担心后面其他的组件会用到.于是决定把拖拽功能做到指令中. 整个功能点如图.鼠标在拖拽区域拖动,整个对话…