首页新闻找找看学习计划

学着写了一个Canvas 涂鸦、缩放、拖拽的功能,碰到问题

0
悬赏园豆:20 [已解决问题] 解决于 2017-01-03 22:01

目前代码都是基于网上样例而改的:已经实现右键拖拽、滚轮放大小、左键涂鸦。

下一步想要增加的功能:在涂鸦后也可以进行右键拖拽、滚轮放大小并且不丢原来涂鸦内容。

<!DOCTYPE html>
<html>
<head>
    <title>Canvas 拖拽、缩放、涂鸦</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script>
        var mousePressed = false;
        var lastX, lastY;
        var canvas, ctx;
        var height = document.documentElement.clientHeight;
        var img,
            imgIsLoaded,//图片是否加载完成;
            imgX = 0,
            imgY = 0,
            imgScale = 1;//倍数
        function InitThis() {
            StopYouJian();
            canvas = document.getElementById('myCanvas');
            canvas.height = height - 200;
            canvas.width = $(".jumbotron").width();
            ctx = canvas.getContext("2d");
            $(".col-lg-2").height(height - 50).css("overflow-y", "scroll");

            img = new Image();
            img.onload = function () {
                imgIsLoaded = true;
                drawImage();

            };
            img.src = "main.jpg";
            $("#myCanvas").mousedown(function (e) {
                mousePressed = true;
                Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false);
            });

            $("#myCanvas").mousemove(function (e) {
                if (mousePressed) {
                    Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true);
                }
            });

            $("#myCanvas").mouseup(function (e) {
                mousePressed = false;
            });
            $("#myCanvas").mouseleave(function (e) {
                mousePressed = false;
            });

            canvas.onmousedown = function (event) {
                var btnNum = event.button;
                if (btnNum == 0) {
                    //左键
                }
                else if (btnNum == 1) {
                    //按下中键

                }
                else if (btnNum == 2) {
                    //鼠标右键
                    var pos = windowToCanvas(canvas, event.clientX, event.clientY);
                    canvas.onmousemove = function (event) {
                        canvas.style.cursor = "move";
                        var pos1 = windowToCanvas(canvas, event.clientX, event.clientY);
                        var x = pos1.x - pos.x;
                        var y = pos1.y - pos.y;
                        pos = pos1;
                        imgX += x;
                        imgY += y;
                        drawImage();
                    }
                    
                }
                else {
                    //你的鼠标太神了,我识别不了
                    alert("你的鼠标太神了,我识别不了?你能告诉我你的鼠标品牌吗?我也想买一个。");
                }

                canvas.onmouseup = function () {
                    canvas.onmousemove = null;
                    canvas.onmouseup = null;
                    canvas.style.cursor = "default";

                }
            }

            //滚动
            canvas.onmousewheel = canvas.onwheel = function (event) {
                var pos = windowToCanvas(canvas, event.clientX, event.clientY);
                event.wheelDelta = event.wheelDelta ? event.wheelDelta : (event.deltaY * (-40));
                if (event.wheelDelta > 0) {
                    imgScale *= 2;
                    imgX = imgX * 2 - pos.x;
                    imgY = imgY * 2 - pos.y;
                } else {
                    imgScale /= 2;
                    imgX = imgX * 0.5 + pos.x * 0.5;
                    imgY = imgY * 0.5 + pos.y * 0.5;
                }
                drawImage();
            }
        }
        function drawImage() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(img, 0, 0, img.width, img.height, imgX, imgY, img.width * imgScale, img.height * imgScale);
        }
        function clearArea() {
            // Use the identity matrix while clearing the canvas
            ctx.setTransform(1, 0, 0, 1, 0, 0);
            ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        }

        function Draw(x, y, isDown) {
            if (isDown) {
                ctx.beginPath();
                ctx.strokeStyle = $("#selColor").val();
                ctx.lineWidth = $("#selWidth").val();
                ctx.lineJoin = "round";
                ctx.moveTo(lastX, lastY);
                ctx.lineTo(x, y);
                ctx.closePath();
                ctx.stroke();
            }
            lastX = x; lastY = y;
        }

        function windowToCanvas(canvas, x, y) {
            var bbox = canvas.getBoundingClientRect();
            return {
                x: x - bbox.left - (bbox.width - canvas.width) / 2,
                y: y - bbox.top - (bbox.height - canvas.height) / 2
            };
        }

        function StopYouJian() {
            document.oncontextmenu = function () {
                return false;
            };
        }
        $(function () {
            InitThis();
        });
    </script>
    <style>
        canvas {
            border: 1px solid #fff;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row" style="margin-top:10px;">
            <div class="col-md-2 col-lg-2">
                <div class="panel panel-primary">
                    <div class="panel-heading text-center">
                        美女
                    </div>
                    <div class="panel-body">
                       
                    </div>
                </div>
            </div>
            <div class="col-md-10 col-lg-10">
                <div class="jumbotron">
                    <div align="center">
                        <canvas id="myCanvas"></canvas>
                        <div class="control-ops">
                            <button type="button" class="btn btn-primary" onclick="javascript:clearArea();return false;">清空画板</button>
                            Line width : <select id="selWidth">
                                <option value="2" selected="selected">2</option>
                                <option value="4">4</option>
                                <option value="6">6</option>
                                <option value="8">8</option>
                                <option value="10">10</option>
                                <option value="12">12</option>
                                <option value="36">36</option>
                            </select>
                            Color : <select id="selColor">
                                <option value="black">black</option>
                                <option value="blue">blue</option>
                                <option value="red" selected="selected">red</option>
                                <option value="green">green</option>
                                <option value="yellow">yellow</option>
                                <option value="gray">gray</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

请放到本地演示,并在当前目录放一张main.jpg的图片,这样看得清楚一点。

问题:在涂鸦后进行右键拖拽、滚轮放大小并且不丢原来涂鸦内容。

DZCMS的主页 DZCMS | 初学一级 | 园豆:5
提问于:2016-09-29 17:58
< >
分享
最佳答案
0

先使用getImageData保存画板图像数据,经过拖拽、缩放处理后,再用putImageData绘制保存的数据.

 

 

收获园豆:20
crow0176 | 菜鸟二级 |园豆:247 | 2016-09-30 11:23

试了一下,保存不了。

DZCMS | 园豆:5 (初学一级) | 2016-09-30 17:30

@abc54288: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Canvas 拖拽、缩放、涂鸦</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script>
        var mousePressed = false;
        var lastX, lastY;
        var canvas, ctx;
        var height = document.documentElement.clientHeight;
        var img,
                imgIsLoaded,//图片是否加载完成;
                imgX = 0,
                imgY = 0,
                imgScale = 1;//倍数
        function InitThis() {
            StopYouJian();
            canvas = document.getElementById('myCanvas');
            canvas.height = height - 200;
            canvas.width = $(".jumbotron").width();
            ctx = canvas.getContext("2d");
            $(".col-lg-2").height(height - 50).css("overflow-y", "scroll");

            img = new Image();
            img.onload = function () {
                imgIsLoaded = true;
                drawImage();

            };
            img.src = "main.jpg";
            $("#myCanvas").mousedown(function (e) {
                mousePressed = true;
                Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false);
            });

            $("#myCanvas").mousemove(function (e) {
                if (mousePressed) {
                    Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true);
                }
            });

            $("#myCanvas").mouseup(function (e) {
                mousePressed = false;
            });
            $("#myCanvas").mouseleave(function (e) {
                mousePressed = false;
            });

            canvas.onmousedown = function (event) {
                var btnNum = event.button;
                if (btnNum == 0) {
                    //左键
                }
                else if (btnNum == 1) {
                    //按下中键

                }
                else if (btnNum == 2) {
                    //鼠标右键
                    var pos = windowToCanvas(canvas, event.clientX, event.clientY);
                    canvas.onmousemove = function (event) {
                        canvas.style.cursor = "move";
                        var pos1 = windowToCanvas(canvas, event.clientX, event.clientY);
                        var x = pos1.x - pos.x;
                        var y = pos1.y - pos.y;
                        pos = pos1;
                        imgX += x;
                        imgY += y;
                        drawImage();
                    }

                }
                else {
                    //你的鼠标太神了,我识别不了
                    alert("你的鼠标太神了,我识别不了?你能告诉我你的鼠标品牌吗?我也想买一个。");
                }

                canvas.onmouseup = function () {
                    canvas.onmousemove = null;
                    canvas.onmouseup = null;
                    canvas.style.cursor = "default";

                }
            }

            //滚动
            canvas.onmousewheel = canvas.onwheel = function (event) {
                var pos = windowToCanvas(canvas, event.clientX, event.clientY);
                event.wheelDelta = event.wheelDelta ? event.wheelDelta : (event.deltaY * (-40));
                if (event.wheelDelta > 0) {
                    imgScale *= 2;
                    imgX = imgX * 2 - pos.x;
                    imgY = imgY * 2 - pos.y;
                } else {
                    imgScale /= 2;
                    imgX = imgX * 0.5 + pos.x * 0.5;
                    imgY = imgY * 0.5 + pos.y * 0.5;
                }
                drawImage();
            }
        }
        function drawImage() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(img, 0, 0, img.width, img.height, imgX, imgY, img.width * imgScale, img.height * imgScale);
        }
        function clearArea() {
            // Use the identity matrix while clearing the canvas
            ctx.setTransform(1, 0, 0, 1, 0, 0);
            ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        }

        function Draw(x, y, isDown) {
            if (isDown) {
                ctx.beginPath();
                ctx.strokeStyle = $("#selColor").val();
                ctx.lineWidth = $("#selWidth").val();
                ctx.lineJoin = "round";
                ctx.moveTo(lastX, lastY);
                ctx.lineTo(x, y);
                ctx.closePath();
                ctx.stroke();
            }
            lastX = x; lastY = y;
        }

        function windowToCanvas(canvas, x, y) {
            var bbox = canvas.getBoundingClientRect();
            return {
                x: x - bbox.left - (bbox.width - canvas.width) / 2,
                y: y - bbox.top - (bbox.height - canvas.height) / 2
            };
        }

        function StopYouJian() {
            document.oncontextmenu = function () {
                return false;
            };
        }
        var image=null;
        function  Save(){
            image=ctx.getImageData(0,0,canvas.width,canvas.height);
        }
        function  Move(){
            clearArea();
            ctx.putImageData(image,100,100);
        }
        $(function () {
            InitThis();
        });
    </script>
    <style>
        canvas {
            border: 1px solid #fff;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row" style="margin-top:10px;">
        <div class="col-md-2 col-lg-2">
            <div class="panel panel-primary">
                <div class="panel-heading text-center">
                    美女
                </div>
                <div class="panel-body">

                </div>
            </div>
        </div>
        <div class="col-md-10 col-lg-10">
            <div class="jumbotron">
                <div align="center">
                    <canvas id="myCanvas"></canvas>
                    <div class="control-ops">
                        <button type="button" class="btn btn-primary" onclick="javascript:Save();return false;">保存</button>
                        <button type="button" class="btn btn-primary" onclick="javascript:Move();return false;">移动</button>
                        <button type="button" class="btn btn-primary" onclick="javascript:clearArea();return false;">清空画板</button>
                        Line width : <select id="selWidth">
                        <option value="2" selected="selected">2</option>
                        <option value="4">4</option>
                        <option value="6">6</option>
                        <option value="8">8</option>
                        <option value="10">10</option>
                        <option value="12">12</option>
                        <option value="36">36</option>
                    </select>
                        Color : <select id="selColor">
                        <option value="black">black</option>
                        <option value="blue">blue</option>
                        <option value="red" selected="selected">red</option>
                        <option value="green">green</option>
                        <option value="yellow">yellow</option>
                        <option value="gray">gray</option>
                    </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

我简单加了两个按钮,一个保存画板数据,一个把保存的画板移动(100,100).

crow0176 | 园豆:247 (菜鸟二级) | 2016-10-06 10:33
其他回答(1)
0

不太明白你的问题,你可以把canvas绘画过程封装,在拖放过程中运行就可以了。

bloodymandoo | 园豆:210 (菜鸟二级) | 2016-09-29 18:21
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册