Raphael的拖动处理
Raphael的拖动处理：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE html> <html> <head> <base href="<%=basePath%>"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Title</title> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script type="text/javascript" src="js/raphael.js"></script> <script type="text/javascript" src="js/index011.js"></script> </head> <body> <div id="container1"></div> <div id="container2"></div> <div id="container3"></div> <div id="container4"></div> </body> </html>
$(function() { // 第一种拖动方式； initRaphael(); // 第二种拖动方式； initRaphael2(); // 多个transform没有累加效果，只有最后一个有效； initRaphael3(); // 拖拽集合情况； initRaphael4(); }); function initRaphael(e) { // 第二种初始化Raphael的方式; var paper = Raphael('container1', 500, 500); var circle = paper.circle(120, 110, 25).attr('fill', 'yellow'); circle.drag(dragmove, dragstart, dragend); // dx,dy是移动的增量，增量都是相对开始位置计算的，x,y是移动到的位置； function dragmove(dx, dy, x, y, e) { // 这样的拖拽只能是有cx,cy属性的才可以拖动； this.attr({ cx : x, cy : y }); console.log("dx:" + dx); console.log("dy:" + dy); console.log("x:" + x); console.log("y:" + y); } // 默认情况还是有5个参数的；arguments.length=5; function dragmove1(e) { console.log(arguments.length); console.log('0:' + arguments[0]); console.log('1:' + arguments[1]); console.log('2:' + arguments[2]); console.log('3:' + arguments[3]); console.log('4:' + arguments[4]); } function dragstart(x, y, e) { this.attr('fill', 'orange'); } function dragend(e) { this.attr('fill', 'yellow'); } } function initRaphael2(e) { // 在不同的div中设置svg对象； var paper = new Raphael('container2', 500, 500); var circle = paper.circle(120, 110, 25).attr('fill', 'yellow'); circle.drag(dragmove, dragstart, dragend); function dragstart(x, y, e) { this.current_transform = this.transform(); console.log('start transform::' + this.current_transform); this.attr('fill', 'orange'); } function dragmove(dx, dy, x, y, e) { // 使用transform进行属性设置； console.log('move transform::' + this.current_transform + 'T' + dx + ',' + dy); this.transform(this.current_transform + 'T' + dx + ',' + dy); } function dragend(e) { this.current_transform = this.transform(); console.log('end transform::' + this.current_transform); this.attr('fill', 'yellow'); } } function initRaphael3(e) { var paper = new Raphael('container3', 500, 500); // 多个transform，移动的距离不会进行积累，会按照最后一个的数据进行移动 paper.ellipse(300, 200, 50, 20).attr('fill', 'green').transform('T5000,1000').transform('T50,10'); } function initRaphael4(e) { var paper = new Raphael('container4', 500, 500); var dice = paper.set(); dice.push(paper.rect(10, 10, 60, 60, 4).attr('fill', '#FFF')); dice.push(paper.circle(22, 58, 5).attr('fill', '#000')); dice.push(paper.circle(58, 22, 5).attr('fill', '#000')); dice.push(paper.circle(40, 40, 5).attr('fill', '#000')); dice.push(paper.circle(22, 22, 5).attr('fill', '#000')); dice.push(paper.circle(58, 59, 5).attr('fill', '#000')); dice.data('myset', dice); // 集合拖拽情况； dice.drag(function(dx, dy, x, y, e) { var myset = this.data('myset'); myset.transform(this.data('mytransform') + 'T' + dx + ',' + dy); // 用下面这样的方式也可以进行； // dice.transform(this.data('mytransform')+'T'+dx+','+dy); }, function(x, y, e) { var myset = this.data('myset'); myset.data('mytransform', this.transform()); // 用下面这样的方式也可以进行； // dice.data('mytransform',this.transform()); }, function(e) { var myset = this.data('myset'); myset.data('mytransform', this.transform()) // 用下面这样的方式也可以进行； // dice.data('mytransform',this.transform()); }); }
