問題タブ [sketchapp]

質問する

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

114 問題
Newest
Active
Bountied
318
Unanswered
0 投票する
2 に答える
1058 参照

svg - 正しい SVG コードを生成するスケッチ アプリでドーナツ チャートを描画する方法

スケッチ アプリがドーナツ チャートを生成する方法に問題はほとんどありません。

これは、Sketch アプリでドーナツ チャートを作成する方法です

スクリーンショットを参照してください。フォローするスクリーンショット

  1. 200px × 200px の円を作成しました
  2. 空塗り。ストローク 25 (センター ポジション)。これは空の州の円になるので、グレーに色付けします
  3. この基本円を複製して、50% の最初のセグメントを作成しました (合計 3、50%、25%、25%)。
  4. 50% の最初のセグメントでは、「ダッシュ」の長さは 314 です。ダッシュは 6 時の位置から引き出され、反時計回りに移動しているように見えます (これは他のセグメントでより明白になります)。ただし、12 時から開始して時計回りに移動する方がはるかに好みです。
  5. 円を複製して 25% の 2 番目のセグメントを作成します。これは、157 の「ダッシュ」と 471 の「ギャップ」に相当します。
  6. 円ストロークの描画方法 (ポイント 4 を参照) のため、90 度の変換を適用しました
  7. 最後のセグメントについては、2 番目のセグメントと同様ですが、180 度の変換のみが異なります。

  8. 生成された SVG は、Sketch Questions で描かれたものを表していません。

    • 最終的な SVG が Sketch アプリで設計どおりに見えるようにする方法
    • スケッチでは、ストロークが 12 時の位置から開始され (変換を使用していると思いますか?)、時計回りに描画されるようにする方法を説明します。

Sketch によって生成されたコード ( https://jsfiddle.net/BrightPixels/932w6j9d/ )


12345678910