前端技术博客-pdfh5.js

  • 首页
  • 分类
  • 文章归档
  • 友情链接
  • 关于我

  • 搜索
canvas react vue 随笔 SVG GitHub pdf.js tomcat nginx uniapp Linux javascript ES6 pdfh5

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

发表于 2019-03-15 | 分类于 前端 | 0 | 阅读次数 1091
  • raphael.draggable项目GitHub地址
  • raphael.draggable.js下载
  • raphael.min.js下载

使用方式:

<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>
Donate comment here
pdfh5.js 微信支付

微信支付

pdfh5.js 支付宝

支付宝

  • 本文作者: pdfh5.js
  • 本文链接: https://www.gjtool.cn/archives/svg绘图工具raphaeljs扩展拖拽缩放功能raphaeldraggablejs
  • 版权声明: 本博客所有文章除特别声明外,均采用CC BY-NC-SA 3.0 许可协议。转载请注明出处!
# javascript # SVG
JS数组对象去重排序等一些常用方法整理
uniapp、5+app 安卓离线打包(多图,慎入)
  • 文章目录
  • 站点概览
pdfh5.js

pdfh5.js

时间扑面而来,而我们终将释怀

21 日志
6 分类
14 标签
RSS
Github
Creative Commons
Links
  • Halo社区
0%
© 2018 — 2022 前端技术博客-pdfh5.js
鄂ICP备19002193号 鄂公网安备 42112602000235号