在HTML Canvas上繪圖需要觸摸功能

Question

嘿，我所有的畫布項目都是響應式的，因此除了能夠用鼠標繪圖外，我還需要人們能夠用手指在平板電腦和手機上進行繪圖。 我該怎么做呢？ 我嘗試添加事件偵聽器，但顯然缺少某些內容。 這是代碼：

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：

<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

觸摸事件的工作原理與鼠標事件有所不同。 當您要提取觸摸位置時，需要訪問touches數組。 即

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

您不能只將事件對象傳遞到可以確定鼠標單擊位置的同一處理程序中。 希望有幫助！

編輯：

如果要使用已有的代碼，則需要進行一些小的修改。 我建議重寫您的findxy()函數，如下所示：

function findxy(res, x, y)

在init內部，您可以將調用此函數的位置修改為以下選項之一：

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

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

那是解決這個問題的簡單方法。 或者，您可以為每種事件類型（即觸摸或鼠標）創建包裝函數，以為您解析該信息並使用適當的客戶端坐標調用findxy 。 因此，您的代碼將如下所示：

// 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);

並不完美，但這將使您走上正確的道路。 希望對您有所幫助！

在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