生活画布改变图纸的大小 [英] Canvas change size of drawings live

问题描述

我正在努力实现以下目标。
我有一个HTML5 Canvas，您可以在其中绘制。代码如下：

  var canvas，ctx，flag = false，prevX = 0，currX = 0，prevY = 0，currY = 0，dot_flag = false; var x =black，y = 2;函数init（）{canvas = document.getElementById（'can'）; ctx = canvas.getContext（2d）; w = canvas.width; h = canvas.height; canvas.addEventListener（mousemove，function（e）{findxy（'move'，e）}，false）; canvas.addEventListener（mousedown，函数（e）{findxy（'down'，e）}，false）; canvas.addEventListener（mouseup，function（e）{findxy（'up'，e）}，false）; canvas.addEventListener（mouseout，function（e）{findxy（'ou​​t'，e）}，false）; } function color（obj）{switch（obj.id）{casegreen：x =green;打破;情况蓝色：x =蓝色;打破;情况红色：x =红色;打破;情况黄色：x =黄色;打破;情况橙色：x =橙色;打破;案例黑色：x =黑色;打破;案例白色：x =白色;打破; } if（x ==white）y = 14;否则y = 2; } function draw（）{ctx.beginPath（）; ctx.moveTo（prevX，prevY）; ctx.lineTo（currX，currY）; ctx.strokeStyle = x; ctx.lineWidth = y; ctx.stroke（）; ctx.closePath（）; } function erase（）{var m = confirm（想清除）; if（m）{ctx.clearRect（0，0，w，h）; document.getElementById（canvasimg）。style.display =none; }} function save（）{document.getElementById（canvasimg）。style.border =2px solid; var dataURL = canvas.toDataURL（）; document.getElementById（canvasimg）。src = dataURL; document.getElementById（canvasimg）。style.display =inline; } function findxy（res，e）{if（res =='down'）{prevX = currX; prevY = currY; currX = e.clientX  -  canvas.offsetLeft; currY = e.clientY  -  canvas.offsetTop; flag = true; dot_flag = true;如果（dot_flag）{ctx.beginPath（）; ctx.fillStyle = x; ctx.fillRect（currX，currY，2，2）; ctx.closePath（）; dot_flag = false; }} if（res =='up'|| res ==out）{flag = false; } if（res =='move'）{if（flag）{prevX = currX; prevY = currY; currX = e.clientX  -  canvas.offsetLeft; currY = e.clientY  -  canvas.offsetTop;画（）; }}}  

< html> < body onload =init（）> < canvas id =canwidth =400height =400style =position：absolute; top：10％; left：10％; border：2px solid;>< / canvas> < div style =position：absolute; top：12％; left：43％;> Choose Color< / div> < div style =position：absolute; top：15％; left：45％; width：10px; height：10px; background：green; id =greenonclick =color（this）>< / div> < div style =position：absolute; top：15％; left：46％; width：10px; height：10px; background：blue; id =blueonclick =color（this）>< / div> < div style =position：absolute; top：15％; left：47％; width：10px; height：10px; background：red; id =redonclick =color（this）>< / div> < div style =position：absolute; top：17％; left：45％; width：10px; height：10px; background：yellow; id =yellowonclick =color（this）>< / div> < div style =position：absolute; top：17％; left：46％; width：10px; height：10px; background：orange; id =orangeonclick =color（this）>< / div> < div style =position：absolute; top：17％; left：47％; width：10px; height：10px; background：black; id =blackonclick =color（this）>< / div> < div style =position：absolute; top：20％; left：43％;>橡皮擦< / div> < div style =position：absolute; top：22％; left：45％; width：15px; height：15px; background：white; border：2px solid; id =whiteonclick =color（this）>< / div> < img id =canvasimgstyle =position：absolute; top：10％; left：52％;风格= 显示：无; > < input type =buttonvalue =saveid =btnsize =30onclick =save（）style =position：absolute; top：55％; left：10％;> < input type =buttonvalue =clearid =clrsize =23onclick =erase（）style =position：absolute; top：55％; left：15％;> < /体> < / html>

到另一个。

现在我想知道以下内容。你们中的大多数人应该知道 OneNote ，它具有可以绘制某些东西的功能，然后你会看到哎呀，这个绘制得太大或太小了其他的东西我画，然后你可以标记它，并抓住角落，使你标记为更小或更大的矩形。

我目前正在考虑相同解决方案在画布上。所以人们可以在该画布中绘制一些东西，并且有一个 resize 按钮，当你点击它时，你可以绘制一个矩形（就像用虚线边框和透明填充），然后标记该矩形中的所有内容。然后，您可以抓住其中一个角落，并将标记的图形放大或缩小，然后移动该内容。 但是说实话，我不知道如何开始接着就，随即。
任何人都有想法如何做到这一点？

解决方案

没那么难：

1. 创建一个按钮，附加一个事件监听器，调用一个函数。我将它称为 resize 用于指导


2. 在画布上创建虚线边框叠加层。只需将其设为div，将画布包装到包装中，即可应用一些CSS。 Voilà。


3. 将事件处理程序附加到div以使其可调整大小或在网上搜索可以实现该功能的库。 然后，您会必须使用 CanvasRenderingContext2D将画布重新绘制为图片。 drawImage（） 。

值得注意的是，画布是光栅图形。放大画布将变得不清晰。

I'm currently trying to achieve the following. I have a HTML5 Canvas, where you can draw in. The code is this:

var canvas, ctx, flag = false,
            prevX = 0,
            currX = 0,
            prevY = 0,
            currY = 0,
            dot_flag = false;
    
        var x = "black",
            y = 2;
    
        function init() {
            canvas = document.getElementById('can');
            ctx = canvas.getContext("2d");
            w = canvas.width;
            h = canvas.height;
    
            canvas.addEventListener("mousemove", function (e) {
                findxy('move', e)
            }, false);
            canvas.addEventListener("mousedown", function (e) {
                findxy('down', e)
            }, false);
            canvas.addEventListener("mouseup", function (e) {
                findxy('up', e)
            }, false);
            canvas.addEventListener("mouseout", function (e) {
                findxy('out', e)
            }, false);
        }
    
        function color(obj) {
            switch (obj.id) {
                case "green":
                    x = "green";
                    break;
                case "blue":
                    x = "blue";
                    break;
                case "red":
                    x = "red";
                    break;
                case "yellow":
                    x = "yellow";
                    break;
                case "orange":
                    x = "orange";
                    break;
                case "black":
                    x = "black";
                    break;
                case "white":
                    x = "white";
                    break;
            }
            if (x == "white") y = 14;
            else y = 2;
    
        }
    
        function draw() {
            ctx.beginPath();
            ctx.moveTo(prevX, prevY);
            ctx.lineTo(currX, currY);
            ctx.strokeStyle = x;
            ctx.lineWidth = y;
            ctx.stroke();
            ctx.closePath();
        }
    
        function erase() {
            var m = confirm("Want to clear");
            if (m) {
                ctx.clearRect(0, 0, w, h);
                document.getElementById("canvasimg").style.display = "none";
            }
        }
    
        function save() {
            document.getElementById("canvasimg").style.border = "2px solid";
            var dataURL = canvas.toDataURL();
            document.getElementById("canvasimg").src = dataURL;
            document.getElementById("canvasimg").style.display = "inline";
        }
    
        function findxy(res, e) {
            if (res == 'down') {
                prevX = currX;
                prevY = currY;
                currX = e.clientX - canvas.offsetLeft;
                currY = e.clientY - canvas.offsetTop;
    
                flag = true;
                dot_flag = true;
                if (dot_flag) {
                    ctx.beginPath();
                    ctx.fillStyle = x;
                    ctx.fillRect(currX, currY, 2, 2);
                    ctx.closePath();
                    dot_flag = false;
                }
            }
            if (res == 'up' || res == "out") {
                flag = false;
            }
            if (res == 'move') {
                if (flag) {
                    prevX = currX;
                    prevY = currY;
                    currX = e.clientX - canvas.offsetLeft;
                    currY = e.clientY - canvas.offsetTop;
                    draw();
                }
            }
        }

<html>
        <body onload="init()">
            <canvas id="can" width="400" height="400" style="position:absolute;top:10%;left:10%;border:2px solid;"></canvas>
            <div style="position:absolute;top:12%;left:43%;">Choose Color</div>
            <div style="position:absolute;top:15%;left:45%;width:10px;height:10px;background:green;" id="green" onclick="color(this)"></div>
            <div style="position:absolute;top:15%;left:46%;width:10px;height:10px;background:blue;" id="blue" onclick="color(this)"></div>
            <div style="position:absolute;top:15%;left:47%;width:10px;height:10px;background:red;" id="red" onclick="color(this)"></div>
            <div style="position:absolute;top:17%;left:45%;width:10px;height:10px;background:yellow;" id="yellow" onclick="color(this)"></div>
            <div style="position:absolute;top:17%;left:46%;width:10px;height:10px;background:orange;" id="orange" onclick="color(this)"></div>
            <div style="position:absolute;top:17%;left:47%;width:10px;height:10px;background:black;" id="black" onclick="color(this)"></div>
            <div style="position:absolute;top:20%;left:43%;">Eraser</div>
            <div style="position:absolute;top:22%;left:45%;width:15px;height:15px;background:white;border:2px solid;" id="white" onclick="color(this)"></div>
            <img id="canvasimg" style="position:absolute;top:10%;left:52%;" style="display:none;">
            <input type="button" value="save" id="btn" size="30" onclick="save()" style="position:absolute;top:55%;left:10%;">
            <input type="button" value="clear" id="clr" size="23" onclick="erase()" style="position:absolute;top:55%;left:15%;">
        </body>
        </html>

So basically just drawing lines from one point to another.

Now I'm wondering about the following. Most of you should know OneNote, which has a feature that you can draw something, and then you see "whoops, this was drawn much to big or to small in comparison to the other things I have drawn" and then you can just mark it and grab the corner and make the rectangle you marked smaller or bigger.

I'm currently thinking about the same solution in a canvas. So people can draw something in that canvas, and there's a resize button, when you click on it, you can "draw" a rectangle (like with a dotted border and transparet fill) and everything in that rectangle is then marked. Then you can grab one of the corners and make the marked drawings smaller or bigger, and move that content as well.

But honestly, I have no idea how to get started with that. Anybody has an idea on how to do that?

解决方案

Not that difficult:

1. Create a button, attach an event listener, call a function. I’ll call it resize for the purpose of my guide
2. Create the dotted border overlay over your canvas. Just make it a div, wrap the canvas into a wrapper, apply a bit of CSS. Voilà.
3. Attach event handlers to the div to make it resizable or search the web for a library that can do that.
4. Then you’ll have to redraw the canvas as image with CanvasRenderingContext2D.drawImage().

It’s worth noting that canvases are raster-graphics. The canvas will become unsharp with enlarging.

这篇关于生活画布改变图纸的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！