2016-12-15 8 views
0

P5.jsを学び始めましたが、touchXとtouchYに関するいくつかの問題があります。オンラインで関連するドキュメントを見つけることができません。touchXとtouchYはP5.jsに定義されていません

私はthisウェブサイトからjavascriptコードをコピーしました。基本的には、マウスの赤い線とタッチのある赤い線が描かれます。

Chrome F12開発ツールのタッチシミュレータを使用しました。このツールは、そのWebサイトでうまく機能します。

次に、latest P5.js from cdnを使用するHTMLファイルを作成しましたが、タッチを使用する場合を除いてすべて正常に動作します。touchXとtouchYはエラーです。

function setup() { 
    createCanvas(windowWidth, windowHeight); 
    strokeWeight(5); 
    stroke(0); 
    fill(0); 
    background(255); 
} 

function draw() { 
    // draw stuff here 
} 


function touchMoved(){ 
    stroke(255, 0, 0); 
    line(touchX, touchY, ptouchX, ptouchY); 
    return false; 
} 

function touchEnded(){ 
    stroke(0, 0, 255); 
    line(touchX, touchY, ptouchX, ptouchY); 
    return false; 
} 

function mouseDragged(){ 
    stroke(0, 255, 0); 
    line(mouseX, mouseY, pmouseX, pmouseY); 
} 

とHTMLがあります::ここで

はJavascriptがscript.jsである

<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>p5JS Test</title> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
    <style> 
     body{ 
      overflow: hidden; 
     } 
    </style> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.5/p5.min.js"></script> 
    <script src="script.js"></script> 
</head> 
<body> 
    <h1>Draw lines!</h1> 
</body> 
</html> 

Here is the CodePen.

多くのおかげで。

答えて

0

p5.jsにtouchXまたはtouchYはありません。代わりにmouseXとmouseYを使用することもできます。タッチ位置がある場合はタッチ位置を与えます(前の位置でもpMouseXとpMouseYが動作すると思います)。

ただし、使用したようなtouchStarted、touchMoved、touchEnded関数があります。イベントセクションのこれらのドキュメントを参照すると、mouseXとmouseYの使用例が表示されます。here

関連する問題