svg绘图工具raphael.js扩展拖拽缩放功能——raphael.draggable.js

pdfh5.js

于 2019-10-16 16:05:53 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： svg JavaScript 文章标签： svg

本文链接：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 &