4

キャンバスにマウスでSVGパスを描きたい。rapheal.js のようなライブラリで図形を描画する必要はありません。純粋な JS が必要です。

私はJSを作成しました：

var svgCanvas = document.getElementById("svgCanvas");
var svgPath;
svgCanvas.addEventListener("touchstart", startDrawTouch, false);
svgCanvas.addEventListener("touchmove", continueDrawTouch, false);
svgCanvas.addEventListener("touchend", endDrawTouch, false);

function startDrawTouch(event) 
{
  var touch = event.changedTouches[0];    
  svgPath =  createSvgElement("path");
  svgPath.setAttribute("fill", "none");
  svgPath.setAttribute("shape-rendering", "geometricPrecision");
  svgPath.setAttribute("stroke-linejoin", "round");
  svgPath.setAttribute("stroke", "#000000");

  svgPath.setAttribute("d", "M" + touch.clientX  + "," + touch.clientY);  
  svgCanvas.appendChild(svgPath);
}

function continueDrawTouch(event) 
{
    if (svgPath)
    {
      var touch = event.changedTouches[0];    
      var pathData = svgPath.getAttribute("d");  
      pathData = pathData + " L" + touch.clientX + "," + touch.clientY
      svgPath.setAttribute("d", pathData);  
    }
}

function endDrawTouch(event) 
{
    if (svgPath)
    {
      var pathData = svgPath.getAttribute("d");  
      var touch = event.changedTouches[0];    
      pathData = pathData + " L" + touch.clientX + "," + touch.clientY
      svgPath.setAttribute("d", pathData);  
      svgPath = null;
    }
}

function createSvgElement(tagName)
{
        return document.createElementNS("http://www.w3.org/2000/svg", tagName);
}

これは、タブレットでパスを描画するのに時間がかかります。パフォーマンスの問題があります。より良いアイデアがある場合は共有してください。

前もって感謝します。

4

2 に答える 2

2

continueDrawTouch 呼び出しごとにパス要素を再構築しています。つまり、内部表現から文字列に変換してから、文字列に追加して再度変換するということです。

これを避けて代わりに SVG DOM を使用すると、ほとんどのブラウザー (特定の Firefox など) のパフォーマンスが向上します。コードは次のようになります。

if (svgPath)
{
    var touch = event.changedTouches[0];
    var newSegment = svgPath.createSVGPathSegLinetoAbs(touch.clientX, touch.clientY);
    svgPath.pathSegList.appendItem(newSegment);
}

同じコメントが endDrawTouch 関数にも当てはまります。

于 2013-09-20T07:04:24.453 に答える