svg绘图工具raphael.js扩展拖拽缩放功能——raphael.draggable.js_raphael 拖拽背景所有元素跟随背景走-CSDN博客

本文链接：https://blog.csdn.net/fade999/article/details/102587389

使用方式：

<div id="container"></div>

<script src="raphael.min.js"></script>
<script src="raphael.draggable.js"></script>
<script type="text/javascript">
    window.onload = function () {
        var paper = Raphael("container", 640, 720);
        var circle = paper.circle(100, 100, 100).attr({ 'fill': '270-#FAE56B:0-#E56B6B:100' });
        var text = paper.text(400, 50, "我是被绘制出来的图片")
        text.attr({
            "font-size": "30px"
        });
        //画布背景整体拖动
        paper.draggable()
        text.click(function () {
            //画布背景还原初始位置
            paper.reset()
        })
        //单独元素拖动
        circle.draggable()
        paper.zoomEnable()
    };
</script>

整体拖拽还有另一种实现方式

<div id="container"></div>

    <script src="raphael.min.js"></script>
    <script src="raphael.draggable.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            var paper = new Raphael('container', 500, 500);
            paper.zoomEnable()
            var dice = paper.set();

            dice.push(paper.circle(100, 100, 100).attr({ 'fill': '270-#FAE56B:0-#E56B6B:100' }))
            var text = paper.text(400, 50, "我是被绘制出来的图片")
            text.attr({
                "font-size": "30px"
            });
            dice.push(text)

            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.push(paper.circle(58, 59, 5).attr('fill', '#000'));
            //画布整体拖拽 - 拖拽所有元素，以达到拖拽画布整体的效果
            dice.drag(function (dx, dy, x, y, e) {
                dice.transform(this.data('mytransform') + 'T' + dx + ',' + dy);
            }, function (x, y, e) {
                dice.data('mytransform', this.transform());
            }, function (e) {
                dice.data('mytransform', this.transform());
            });

        }
    </script>