存储绘图的画布坐标答案

【问题标题】：Store canvas coordinates of drawing存储绘图的画布坐标
【发布时间】：2014-09-27 08:34:00
【问题描述】：

我只是搞砸了一点，所以我做了这个 Android 解锁风格的东西。它使用<canvas> 让某人绘制，然后相应地在点上着色。但是，我现在要做的是将绘图的坐标存储在表格中。因此，下次可以对照存储的图纸检查图纸。

Codepen：http://codepen.io/anon/pen/xugav

代码：

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var canvas, ctx, flag = false,
    prevX = 0,
    currX = 0,
    prevY = 0,
    currY = 0,
    dot_flag = false;

var x = "#000",
    y = 1;

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 buttonCoords(id) { // replaces the coorX functions, takes element id as parameter
    var element = document.getElementById(id);
    var position = element.getBoundingClientRect();    
    var x = position.left+7;
    var y = position.top+7;
    xend = x + 19;
    yend = y + 19;

    return {
        top: y,
        bottom: yend,
        left: x,
       right: xend
    };    
}

function draw() {
    ctx.beginPath();
    ctx.moveTo(prevX, prevY);
    ctx.lineTo(currX, currY);
    ctx.strokeStyle = x;
    ctx.lineWidth = y;
    ctx.stroke();
    var i = 0;
    var k = 0;

    var coords = buttonCoords('patternlockbutton1');
    var coords2 = buttonCoords('patternlockbutton2');
    var coords3 = buttonCoords('patternlockbutton3');
    var coords4 = buttonCoords('patternlockbutton4');
    var coords5 = buttonCoords('patternlockbutton5');
    var coords6 = buttonCoords('patternlockbutton6');
    var coords7 = buttonCoords('patternlockbutton7');
    var coords8 = buttonCoords('patternlockbutton8');
    var coords9 = buttonCoords('patternlockbutton9');
    if (currX >= coords.left && currX <= coords.right && currY >= coords.top && currY <= coords.bottom) {
        $("#patternlockbutton1").addClass("touched");
    } else if (currX >= coords2.left && currX <= coords2.right && currY >= coords2.top && currY <= coords2.bottom) {
        $("#patternlockbutton2").addClass("touched");
    } else if (currX >= coords3.left && currX <= coords3.right && currY >= coords3.top && currY <= coords3.bottom) {
        $("#patternlockbutton3").addClass("touched");
    } else if (currX >= coords4.left && currX <= coords4.right && currY >= coords4.top && currY <= coords4.bottom) {
        $("#patternlockbutton4").addClass("touched");
    } else if (currX >= coords5.left && currX <= coords5.right && currY >= coords5.top && currY <= coords5.bottom) {
        $("#patternlockbutton5").addClass("touched");
    } else if (currX >= coords6.left && currX <= coords6.right && currY >= coords6.top && currY <= coords6.bottom) {
        $("#patternlockbutton6").addClass("touched");
    } else if (currX >= coords7.left && currX <= coords7.right && currY >= coords7.top && currY <= coords7.bottom) {
        $("#patternlockbutton7").addClass("touched");
    } else if (currX >= coords8.left && currX <= coords8.right && currY >= coords8.top && currY <= coords8.bottom) {
        $("#patternlockbutton8").addClass("touched");
    } else if (currX >= coords9.left && currX <= coords9.right && currY >= coords9.top && currY <= coords9.bottom) {
        $("#patternlockbutton9").addClass("touched");
    }   

    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 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;
            console.log(currX, currY);
            draw();
        }
    }
}

function print(){
    var c = document.getElementById("can");
    var ctx = c.getContext("2d");
    var imgData = ctx.getImageData(10,10,50,50);
    console.log(imgData);
    var img = c.toDataURL("image/png");
    var element = document.getElementById("container");
    element.innerHTML = "<img src='"+img+"'><p>"+imgData+"</p>";

}

</script>
<style>
    .patternlockbutton{
        border-color: red;
        background-color: transparent;
        background-repeat:no-repeat;
        display:block;
        width:33px;
        height:33px;
        float:left;
        margin:26px;
        -ms-touch-action: none;
        border-style: solid;
        border-width: 5px;
        -webkit-border-top-left-radius: 50px;
        -webkit-border-top-right-radius: 50px;
        -moz-border-radius-topleft: 50px;
        -moz-border-radius-topright: 50px;
        border-top-left-radius: 50px;
        border-top-right-radius: 50px;
        -webkit-border-bottom-left-radius: 50px;
        -webkit-border-bottom-right-radius: 50px;
        -moz-border-radius-bottomleft: 50px;
        -moz-border-radius-bottomright: 50px;
        border-bottom-left-radius: 50px;
        border-bottom-right-radius: 50px;
    }
    .touched{
        border-color: red;
        background-color: red;
        background-repeat:no-repeat;
        display:block;
        width:33px;
        height:33px;
        float:left;
        margin:26px;
        -ms-touch-action: none;
        border-style: solid;
        border-width: 5px;
        -webkit-border-top-left-radius: 50px;
        -webkit-border-top-right-radius: 50px;
        -moz-border-radius-topleft: 50px;
        -moz-border-radius-topright: 50px;
        border-top-left-radius: 50px;
        border-top-right-radius: 50px;
        -webkit-border-bottom-left-radius: 50px;
        -webkit-border-bottom-right-radius: 50px;
        -moz-border-radius-bottomleft: 50px;
        -moz-border-radius-bottomright: 50px;
        border-bottom-left-radius: 50px;
        border-bottom-right-radius: 50px;
    }
    #can {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 99;
        display: block;
    }
</style>
</head>
<body onload="init()">
    <div style="width:300px;height:400px; position: relative;">
        <div class="patternlockbutton" id="patternlockbutton1"></div>
        <div class="patternlockbutton" id="patternlockbutton2"></div>
        <div class="patternlockbutton" id="patternlockbutton3"></div>
        <div class="patternlockbutton" id="patternlockbutton4"></div>
        <div class="patternlockbutton" id="patternlockbutton5"></div>
        <div class="patternlockbutton" id="patternlockbutton6"></div>
        <div class="patternlockbutton" id="patternlockbutton7"></div>
        <div class="patternlockbutton" id="patternlockbutton8"></div>
        <div class="patternlockbutton" id="patternlockbutton9"></div>
        <canvas id="can" width="300px" height="400px"></canvas>
    </div>
    <input type="button" value="clear" id="clr" size="23" onclick="erase()" style="position:absolute;top:55%;left:15%;">
    <button onclick="print()">Console.log</button>
    <div id="container">
    </div>
</body>
</html>

【问题讨论】：

标签： javascript android css html canvas

【解决方案1】：

要获取当前在 HTML5 Canvas 上的数据，我们只需使用 ctx.getImageData(...)。这将获取您定义的某个矩形内每个像素的信息，我们对像素本身感兴趣。它存储在imageData.data 中，如下所示：

imageData.data[0] -> pixel1 red value
imageData.data[1] -> pixel1 green value
imageData.data[2] -> pixel1 blue value
imageData.data[3] -> pixel1 alpha value
imageData.data[4] -> pixel2 red value
...

所以像素以 4 个为一组存储。如果你想要整个 Canvas，那么我们这样做：

ctx.getImageData(0, 0, canvas.width, canvas.height)

为了检查两个图像之间的差异，我们获取两者的图像数据，然后我们遍历像素值并检查差异。这是获取两个不同图像的示例。在此示例中，我使用第三张图像以红色绘制差异：

var X = 0, Y = 0;

for(var i = 0; i < img1Data.data.length; i += 4) {  
    if(img1Data.data[i] != img2Data.data[i] || 
    img1Data.data[i+1] != img2Data.data[i+1] || 
    img1Data.data[i+2] != img2Data.data[i+2] || 
    img1Data.data[i+3] != img2Data.data[i+3]) {
        ctx_diff.fillRect( X, Y, 1, 1 );
    }
    X += 1;
    if(X >= canvas1.width) { Y+=1; X = 0 }
}

整个代码在这个Fiddle

这是输出：

【讨论】：

JSFiddle 网站似乎有问题，看起来一些不使用帐户制作的小提琴已被删除。为了安全起见，我通过帐户重新制作了小提琴：jsfiddle.net/AniHouse/toccbL2h
好的，谢谢！我将此添加到我的代码中，但不知何故它无法识别某些部分。我贴在这里：codepen.io/anon/pen/izKCc
当我单击Console.log() 时，它似乎可以识别块和绘制的线条。你的意思是红色圆圈没有显示？如果是这样，那只是因为它们不属于画布。