タッチを使用しているときにフリーライン (Raphael) パスに問題があります。フリーハンドで何かを描いていると、線が止まる直前に直線が出て、ラファエロ紙の中心点につながることがあります。この問題に直面した人はいますか?私が直面しているもののスクリーンショットを添付しました。ラファエル紙の中心につながる不要な線を赤でマークしました。
更新: jsfiddle を作成しました
Update2: この問題は、Android ブラウザーで描画に時間がかかる場合に発生することに気付きました。キャンバスを数秒間タッチしただけでも、タッチポイントが線を引いて中心につながり、画面が点滅します。だから、私はそれが数秒間触れたときのタッチイベントに関連していると考えています。
var board = $("#board");
board.bind("mousedown", _mousedownHandler);
board.bind("touchstart", _mousedownHandler);
function _drawFreeLineBegin(x, y) {
board.lineEl.path = _drawOptions.paper.path("M"
+ (x - _drawOptions.offset.left) + ","
+ (y - _drawOptions.offset.top));
_setNewElementProperties(board.lineEl.path,
Configuration.getProperties("freeLine"));
board.bind("mousemove.mmu", _mousemoveHandler);
board.one("mouseup.mmu", _mouseupHandler);
board.bind("touchmove.mmu", _mousemoveHandler);
board.one("touchend.mmu", _mouseupHandler);
}
function _mousedownHandler(event) {
if(event.type == "touchstart"){
event = event.originalEvent.touches\[0\];
}
_drawFreeLineBegin(event.pageX, event.pageY);
return false;
}
function _mousemoveHandler(event) {
if(event.type == "touchmove"){
event = event.originalEvent.touches\[0\];
}
board.lineEl.path
.attr(
"path",
board.lineEl.path.attr("path")
+ "L"
+ (event.pageX - )
+ ","
+ (event.pageY ));
return true;
}
function _mouseupHandler(event) {
board.unbind(".mmu");
board.lineEl.path = null;
event.stopPropagation();
event.preventDefault();
}