html - Web ページでの iPad の指のトレース パス

Question

iPad の Web ページでパスを指でたどる最も簡単な方法は何ですか?

ベクターグラフィックスベースにしたいので、滑らかな曲線です.これを行うためのデモコードを含むライブラリはありますか?

Answer 1

私はラファエルとタイムアウトでそれをやった。

start = null

document.getElementById("jw").addEventListener("touchstart",function(e){
  paper.clear()
  lastloc = ""
  chain = ""
  start = "M"+[e.pageX,e.pageY]
  // alert(start)
})

lastloc = ""

document.getElementById("jw").addEventListener("touchmove",function(e){
  lastloc = [e.pageX,e.pageY]
})

document.getElementById("jw").addEventListener("touchend",function(e){
  // paper.clear()
})

chain = ''

setInterval(function(){
  chain += 'L'+lastloc
  lastloc = ''
  if(start){
    paper.clear()
    var path = paper.path(start+chain)
    path.attr("stroke", "#fff")
    path.attr("stroke-width", "15")
  }
}, 30)

// Creates canvas 320 × 200 at 10, 50
var paper = Raphael("jw", 800, 400);