码迷,mamicode.com
首页 > 其他好文 > 详细

Raphael的拖动处理

时间:2016-01-07 10:05:50      阅读:244      评论:0      收藏:0      [点我收藏+]

标签:

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());
    });
}

 

Raphael的拖动处理

标签:

原文地址:http://www.cnblogs.com/stono/p/5108631.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!