Canvas的应用，图片的移动、旋转、缩放

最新推荐文章于 2024-07-02 09:23:33 发布

monster123321

最新推荐文章于 2024-07-02 09:23:33 发布

阅读量6.6k

点赞数 1

分类专栏： Zrender 文章标签： canvas zrender 旋转拖拽缩放

本文链接：https://blog.csdn.net/monster123321/article/details/54409485

版权

Zrender 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Canvas的应用，图片的移动、旋转、缩放

借助Canvas类库（zrender）实现对图片的拖拽，旋转，缩放

效果图如下：

代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Zrender</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="jquery-2.1.1/jquery.min.js"></script>
        <script src="zrender/asset/js/esl/esl.js"></script>
        <style type="text/css">
            #mainCanvas{
                margin: 0 auto;
                height: 800px;
                width: 800px;
                min-height: 800px;
                min-width: 800px;
            }
        </style>
    </head>
    <body>
    <div class="container-fluid">
        <div class="col-sm-9 col-sm-offset-12 col-md-10 col-md-offset-2 ">
            <div id="mainCanvas" class="mainCanvas">正在加载中...</div>
        </div>
    </div>

<script type="text/javascript">
    var zr; // 全局可用zrender对象
    var zArea; //区域
    var domMain = document.getElementById('mainCanvas');
    require.config({
        packages: [
            {
                name: 'zrender',
                location: 'zrender/src',
                main: 'zrender'
            }
        ]
    });
    require(
        [
            'zrender',
            'zrender/config',
            'zrender/Storage',
            'zrender/tool/area',
            'zrender/tool/color',
            'zrender/animation/Animation',
            'zrender/shape/Star',
            'zrender/shape/Circle',
            'zrender/shape/Image',
            'zrender/shape/Ring',
            'zrender/shape/BezierCurve'
        ],
    function(zrender, config, Storage, Area, color, Animation, StarShape, CircleShape, ImageShape,RingShape,BezierCurveShape){
            //
            zr = zrender.init( document.getElementById('mainCanvas') );

            //背景底图
            zr.addShape(bgimage = new ImageShape({
                style : {
                    image : "bottom1.png",
                    x : 0,
                    y : 0,
                    width : 800,
                    height : 800,
                    lineWidth : 0
               },
               hoverable : false
            }));                    
        zr.addShape(ring_shape = new RingShape({
                style: {
                    x: 400,
                    y: 400,
                    r0: 165,
                    r :380,
                    brushType : 'both',
                    color : 'rgba(220, 20, 60, 0)',          // rgba supported
                    //strokeColor : color.getColor(5),  // getColor from default palette
                    lineWidth : 1,
                    textPosition :'inside'
                }
            }));
        //添加图片（上图中为了显示效果添加了5张图片，下面代码中只有一次）
        var rotationPI = Math.PI / 180; //旋转角度
        var origin = 1.1;
        zr.addShape(testimg = new ImageShape({
            style : {
                x : 400,
                y : 400,
                image : "jy.png",
                width : 80,
                height : 80
            },
            draggable : true,
            clickable : true,
            onmousewheel: function(params){ //拖动
                var eventTool = require('zrender/tool/event');
                var delta = eventTool.getDelta(params.event);
                var imgx = params.target.style.x; //图片位置 x
                var imgy = params.target.style.y; //图片位置 y
                var imgw = params.target.style.width; //图片宽度 width
                var imgh = params.target.style.height; //图片高度 height
                origin += (delta > 0 ? 1 : -1) * 0.1;
                zr.modShape(params.target.id, {scale : [origin, origin, imgx+imgw/2, imgy+imgh/2]});    
                zr.refresh();
                eventTool.stop(params.event);
            },
            onclick : function(params){
                var imgx = params.target.style.x; //图片位置 x
                var imgy = params.target.style.y; //图片位置 y
                var imgw = params.target.style.width; //图片宽度 width
                var imgh = params.target.style.height; //图片高度 height
                var x = imgx + imgw/2;
                var y = imgy + imgh/2;

                rotationPI = rotationPI > Math.PI * 2 ? rotationPI % (Math.PI * 2) : rotationPI;
                rotationPI += Math.PI * 5 /180;
                 zr.modShape(params.target.id, {
                    rotation: [rotationPI, x, y]
                    });
                zr.refresh();
            },
            ondrift :function( shape, x, y){
                console.info(shape);
            }
        }));
    //获取图片
    ImageURL = function(){
        var ShapeURL = zr.toDataURL();
        return ShapeURL;
    };          
    }
</script>
</body>
</html>