反応ネイティブでタッチで形状をトレースする最も簡単な方法は？

8

反応ネイティブアプリで確認画面を表示しようとしています。ユーザーがアクションを確認するために楕円をトレースする必要があります。今夜のホテルのロゴと同じです。ユーザーにsvgをトレースさせるために使用できるライブラリはありますか？

ユーザーが行うことの例を次に示します。

react-native svg touch

— ルーニードゥードル
ソース

3

他の誰かがこれを実行しようとしているのを見つけました。これは最もクリエイティブなアプローチではないと思います。何年も前にこれを一気に行う方法がありました。

私はSVGがラインアートアニメーションに使用されていることを知っています。

https://medium.com/@sterling.meghan/svg-line-animation-for-beginners-51857c88357f

また、SVGにはreact-native-svgと呼ばれるライブラリがあり、SVGオブジェクトはJavaScriptでドラッグできます。

http://www.petercollingridge.co.uk/tutorials/svg/interactive/dragging/

したがって、これを解決するための私の考えは次のとおりです。

一番上のものは画面全体を塗りつぶし、トレースがあります（線画）

背後にあるSVGオブジェクトに到達するには、このカットを介してのみ実行できます。カットの下にある大きなSVG色のシェイプの一部である開始点に小さな円を表示できます。このシェイプは2番目のレイヤーです。

ユーザーはトレースを開始しますが、実際に行っているのは、SVGビッグオブジェクトをあるポイントから次のポイントにドラッグすることです。これを実行した場合にのみ、オブジェクトを穴からドラッグできるため、トレースのようにパスをたどる必要があります。（彼は穴を通して2番目のレイヤーのオブジェクトにのみ到達できます）

ドラッグされているSVGオブジェクトは最上位レイヤーとは異なる色を持っているので、ユーザーがドラッグすると、パスがいっぱいになったように見えます。

これがあなたに役立つか、少なくともいくつかのアイデアを与えることを願っています。また、CSSラインアートアニメーションを使用して、ユーザーがトレースを完了したときに別のSVGをアニメーション化することもできます。時間があるときに、たぶんこれを試すでしょう。

— フェデリコ・サナネス
ソース

0

最終的に、react-native-sketch-canvasを使用してしまう同様の状況に遭遇しました

ユーザーにキャンバス上に描画させ、出力パスを事前定義されたパスと比較しました。これは完璧なソリューションではありませんでしたが、私の要件には十分満足できました。

— フィロズ・アーメド
ソース

0

認識には、rn-drawパッケージから構築されたrn-gesture-recognizerを使用できます。https： //www.npmjs.com/package/rn-gesture-recognizer

（https://www.npmjs.com/package/rn-draw）

そして、たとえば、svgの上に完璧なcssシェイプを作成できます。https： //codedaily.io/tutorials/22/The-Shapes-of-React-Native

また、そのような他のことを行うことができます：https : //codedaily.io/tutorials/55/Create-a-Draggable-Opacity-Changing-Circle-with-Reanimated-in-React-Native

— LG
ソース

0

一般的に、SVGでの作業について話すとき、頭に浮かぶ最初のライブラリはD3 Jです。d3では、svg内の任意の形状のパスをたどることができ、補間を作成できます。そのような例の1つを以下に示します。これはどんな方法でもあなたを助けることができます。

<!DOCTYPE HTML>
<html lang="en">
<head>
</head>
<body>

<div id="loader_container"></div>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>

function loader(config) {
  return function() {
    var radius = Math.min(config.width, config.height) / 2;
    var tau = 2 * Math.PI;

    var arc = d3.svg.arc()
            .innerRadius(radius*0.5)
            .outerRadius(radius*0.9)
            .startAngle(0);

    var svg = d3.select(config.container).append("svg")
        .attr("id", config.id)
        .attr("width", config.width)
        .attr("height", config.height)
      .append("g")
        .attr("transform", "translate(" + config.width / 2 + "," + config.height / 2 + ")")

    var background = svg.append("path")
            .datum({endAngle: 0.33*tau})
            .style("fill", "#4D4D4D")
            .attr("d", arc)
            .call(spin, 1500)

    function spin(selection, duration) {
        selection.transition()
            .ease("linear")
            .duration(duration)
            .attrTween("transform", function() {
                return d3.interpolateString("rotate(0)", "rotate(360)");
            });

        setTimeout(function() { spin(selection, duration); }, duration);
    }

    function transitionFunction(path) {
        path.transition()
            .duration(7500)
            .attrTween("stroke-dasharray", tweenDash)
            .each("end", function() { d3.select(this).call(transition); });
    }

  };
}


var myLoader = loader({width: 960, height: 500, container: "#loader_container", id: "loader"});
myLoader();

</script>

</body>
</html>

出典：http : //bl.ocks.org/MattWoelk/6132258

補間は、任意の型、文字列、日付などで調整できます。補間については、以下のリンクが役立ちます

https://bl.ocks.org/mbostock/3173784

http://jsfiddle.net/SHF2M/

https://codepen.io/frcodecamp/pen/wxXypx

両側の線で接続された2つの楕円として外側のsvg形状を作成します。楕円のパスを使用して、回転位置を使用して補間できます。回転位置は、確認画面の進行状況によって異なります。

— redhatvicky
ソース