4

1 つのキャンバスに複数の Path2D があり、context.scale() と context.translate() を調整するのではなく、それぞれを個別にスケーリングおよび配置できるようにしたいと考えています。ストロークダッシュとストローク長を変更できるようにしたいので、SVG パスデータを使用して各 path2D オブジェクトを構築しています。

Path2D を使用してこれを達成できないようです。これを解決するための最良の方法は何ですか?

私はいくつかの潜在的なオプションを検討しています:

  1. svg ソースで drawImage メソッドを使用する
  2. svg パス データをキャンバス パス アークに変換します (おそらくライブラリを使用)
  3. 実際の SVG パス データを調整し、各ペイントの Path2D オブジェクトを再構築します。

編集:

p2 の位置を変更せずに p1 を p2 に向かって移動しようとしているこのコード ペンを作成しました。コンテキストを翻訳すると、両方のオブジェクトが移動します。p1のみの位置を調整する最良の方法は何ですか?

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var p1x = 0
var p1 = new Path2D("M1 0 h 100 v 50 h -100 Z");
var p2 = new Path2D("M200 0 h 50 v 25 h -50 Z");

setInterval(() => {
  p1x = p1x + 1
  ctx.translate(0, 0)
  ctx.clearRect(0, 0, 300, 300)
  ctx.translate(p1x, 0)
  ctx.fill(p1)
  ctx.fill(p2)    
}, 1000)

http://codepen.io/jasonpearson/pen/reXyVG

4

3 に答える 3

2

最初の要素だけに翻訳を適用できます。

setInterval(() => {
    p1x = p1x + 1;
    ctx.clearRect(0, 0, 300, 300);
    ctx.save();
    ctx.translate(p1x, 0);
    ctx.fill(p1);
    ctx.restore();
    ctx.fill(p2);
}, 1000);
于 2016-07-20T04:26:37.933 に答える