[JavaScript知识库] js+html5 canvas 实现图形缩放功能演示及实例

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> js+html5 canvas 实现图形缩放功能演示及实例 -> 正文阅读

[JavaScript知识库]js+html5 canvas 实现图形缩放功能演示及实例

在这里插入图片描述

<!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>