在HTML Canvas上绘图需要触摸功能

Question

Hey all my canvas project is responsive so in addition to being able to draw with the mouse I need folks to be able to draw with their finger on their tablets and phones. 嘿，我所有的画布项目都是响应式的，因此除了能够用鼠标绘图外，我还需要人们能够用手指在平板电脑和手机上进行绘图。 How do I go about doing this? 我该怎么做呢？ I've tried adding event listeners but there is obviously something missing. 我尝试添加事件侦听器，但显然缺少某些内容。 Here is the code: 这是代码：

HTML: HTML：

        <body onload="init()">



            <div class="container">
              <canvas id="can" width="750px" height="500px"></canvas>
               <div class="header">
                <div class="cross"></div>
                <div id="flake"></div>
                <div id="flake2"></div>
            <div class="message"><h1>HI</h1><h3>Content</h3></div>

               </div>
            <div class="main"></div>


<div id="color">Choose Color</div>
<div id="green" onclick="color(this)"></div>
<div id="blue" onclick="color(this)"></div>
<div id="red" onclick="color(this)"></div>
<div id="yellow" onclick="color(this)"></div>
<div id="orange" onclick="color(this)"></div>
<div id="white" onclick="color(this)"></div>
<div id="black" onclick="color(this)"></div>

<a href="#" class="button" id="btn-download" download="my-file-name.jpg"><p>Download</p></a>

</div>

JS: JS：

<script type="text/javascript">
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");
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, 750, 1000);
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);
canvas.addEventListener("touchmove", function (e) {
    findxy('move', e)
}, false);
canvas.addEventListener("touchstart", function (e) {
    findxy('down', e)
}, false);
canvas.addEventListener("touchend", function (e) {
    findxy('up', 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 "white":
        x = "white";
        break;
    case "black":
        x = "black";
        break;
}
if (x == "grey") y = 14;
else y = 4;

}

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";
}
}

var button = document.getElementById('btn-download');
button.addEventListener('click', function (e) {
var dataURL = canvas.toDataURL('image/jpeg');
button.href = dataURL;


})

var button = document.getElementById('btn-download');
button.addEventListener('touchstart', function (e) {
var dataURL = canvas.toDataURL('image/jpeg');
button.href = dataURL;

});


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();
    }
}
}

Answer 1

A touch event works a little differently than a mouse event. 触摸事件的工作原理与鼠标事件有所不同。 When you want to extract the touch position you need to access the touches array. 当您要提取触摸位置时，需要访问touches数组。 ie 即

e.touches[0].clientX //Returns the clientX position of the first touch location

You can't just pass the event object into the same handler that figures out mouse click locations. 您不能只将事件对象传递到可以确定鼠标单击位置的同一处理程序中。 Hope that helps! 希望有帮助！

Edit: 编辑：

If you want to use the code you already have, you need to make a minor modification. 如果要使用已有的代码，则需要进行一些小的修改。 I would suggest rewriting your findxy() function to be like this: 我建议重写您的findxy()函数，如下所示：

function findxy(res, x, y)

Inside of your init you can modify where you call this function to be one of these options: 在init内部，您可以将调用此函数的位置修改为以下选项之一：

// Inside mousedown:
findxy('down', e.clientX, e.clientY);

//Inside touchstart:
findxy('down, e.touches[0].clientX, e.touches[0].clientY);

That is a simple solution to this problem. 那是解决这个问题的简单方法。 Alternatively, you can create a wrapper function for each event type (ie touch or mouse) that parses that info out for you and calls findxy with the appropriate client coordinates. 或者，您可以为每种事件类型（即触摸或鼠标）创建包装函数，以为您解析该信息并使用适当的客户端坐标调用findxy 。 So your code would be like this: 因此，您的代码将如下所示：

// inside Init:
canvas.addEventListener("mousedown", function (e) {
  findxymouse('down', e)
}, false);

canvas.addEventListener("touchstart", function (e) {
  findxytouch('down', e)
}, false);

// wrapper functions:
function findxymouse(res, e) {
  findxy(res, e.clientX, e.clientY);
}

function findxytouch(res, e) {
  findxy( res, e.touches[0].clientX, e.touches[0].clientY);

Not perfect, but this will put you on the right track. 并不完美，但这将使您走上正确的道路。 I hope that helps! 希望对您有所帮助！

在HTML Canvas上绘图需要触摸功能

问题描述

1 个解决方案

解决方案1
0 2014-12-17 21:48:32

在HTML Canvas上绘图需要触摸功能

问题描述

1 个解决方案

解决方案1 0 2014-12-17 21:48:32

解决方案1
0 2014-12-17 21:48:32