js+html5 canvas 实现图形缩放功能演示及实例

最新推荐文章于 2023-11-29 16:21:48 发布

Kevin_Lai_1987

最新推荐文章于 2023-11-29 16:21:48 发布

阅读量833

点赞数 1

分类专栏： PCB 图形学前端技术文章标签： html5 javascript

本文链接：https://blog.csdn.net/Kevin_Lai_1987/article/details/124044203

版权

PCB 同时被 3 个专栏收录

10 篇文章 5 订阅

订阅专栏

图形学

4 篇文章 0 订阅

订阅专栏

前端技术

4 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="dist/js/jquery-1.12.0.js"></script>
    <link href="dist/css/bootstrap.min.css" rel="stylesheet" />
    <script src="dist/js/JCanvas.js"></script>
    <link href="dist/css/font-awesome.min.css" rel="stylesheet" />
    <script>
        var mouseX;
        var mouseY;

        var px;
        var py;

        var scx=1;
        var scy=1;

        var resizeTimer = null;
        $(window).bind('resize', function () {
            if (resizeTimer) clearTimeout(resizeTimer);
            resizeTimer = setTimeout(function () {
                load()
            }, 200);
        });
        $(function () {
            
        })

        function load(xx,yy,sx,sy) {
            $('#canvas').attr('width', $('#map').width()).attr('height', $('#map').height());
            $('#canvas').scaleCanvas({
                x: xx, y: yy,
                scaleX: sx, scaleY: sy
            }).drawArc({
                fillStyle: 'red',
                x: 200, y: 200,
                radius: 20
            }).drawArc({
                fillStyle: 'red',
                x: 600, y: 40,
                radius: 20
            }).drawArc({
                fillStyle: 'red',
                x: 100, y: 500,
                radius: 20
            }).drawRect({
                fillStyle: 'red',
                x: 100, y: 100,
                width: 100, height: 50
            }).drawPath({
                strokeStyle: 'red',
                strokeWidth: 4,
                closed: true,
                x: 160, y: 150,
                // Top petal
                p1: {
                    type: 'arc',
                    x: 0, y: -50,
                    start: -90, end: 90,
                    radius: 50
                },
                // Right petal
                p2: {
                    type: 'arc',
                    x: 50, y: 0,
                    start: 0, end: 180,
                    radius: 50
                },
                // Bottom petal
                p3: {
                    type: 'arc',
                    x: 0, y: 50,
                    start: 90, end: 270,
                    radius: 50
                },
                // Left petal
                p4: {
                    type: 'arc',
                    x: -50, y: 0,
                    start: 180, end: 360,
                    radius: 50
                }
            });
        }

        function show(event) {
            var infoDiv = document.getElementById('canvas');
            mouseOver(event);
            document.getElementById("position").innerHTML = "x:" + mouseX + " y:" + mouseY;
        }

        function mouseOver(obj) {
            e = obj || window.event;
            // 此处记录鼠标停留在组建上的时候的位置, 可以自己通过加减常量来控制离鼠标的距离.
            mouseX = e.layerX || e.offsetX;
            mouseY = e.layerY || e.offsetY;            
        }

        function scaleImg(event) {
            
                if (event.wheelDelta <= -120) {
                    //alert('b'); //缩小
                    scx *= 0.5;
                    scy *= 0.5;
                    px = mouseX ;
                    py = mouseY ;
                    load(px, py, scx, scy)
                    //$('#canvas').restoreCanvas();
                } else if (event.wheelDelta >= 120) {
                    scx *= 1.5;
                    scy *= 1.5;
                    px = mouseX ;
                    py = mouseY ;
                    load(px, py, scx, scy)
                };
        }

        function home_click() {
            $('#canvas').restoreCanvas();
            scx = 1;
            scy = 1;
            px = mouseX;
            py = mouseY;
            load(0, 0, 1, 1)
        }

    </script>
    <style>
        #menus a{width:70px;cursor:pointer;color:#000;display:inline-block}
    </style>
</head>
<body style="overflow:hidden">
    <div style="background: #f5f5f5">
        <div id="menus" style="padding-left:3px;line-height:40px;height:40px;position:absolute;top:0px;outline:1px solid #000;right:0px;left:0px;background:#f5f5f5">
           <span style="display:inline-block;width:250px"></span> 
            <a class="btn btn-xs btn-primary" onclick="load(0,0,1,1)">导入图形</a>
            <a onclick="home_click()"><i class="fa fa-home fa-2x"></i></a>
            <a><i class="fa fa-search-plus fa-2x"></i></a>
            <a><i class="fa fa-search-minus fa-2x"></i></a>
        </div>
        <div id="metrix" style="position:absolute;width:200px;top:40px;left:0px;bottom:40px;outline:1px solid #000;background:#f5f5f5">

        </div>
        <div id="map" style="background:#000;position:absolute;left:200px;right:0px;top:40px;bottom:40px;outline:1px solid #000;">
            <canvas id="canvas" onmousemove="show(event);" onmousewheel="scaleImg(event)" ></canvas>
        </div>
        
    </div>
    <div style="position:absolute;height:40px;line-height:40px;left:0px;right:0px;bottom:0px">
        <span id="position"> x: y:</span>
    </div>
</body>
</html>