6

javascript html5キャンバスを使用して、ポリゴンを作成し、色の代わりに画像を表示する方法はありますか？

4

2 に答える 2

5

いくつかの調査の後、最初に画像を使用してパターンを作成し、次にそのパターンをfillStyle次のように設定することで、それを行うことができると思います。

var ctx = canvas.getContext("2d");
var pattern = ctx.createPattern(imageObj, "repeat");
ctx.fillStyle = pattern;

次に、ポリゴンを作成し（とを使用moveToしてlineTo）、通常どおりに塗りつぶすだけです。

ソース：このプラグインのソースコード。免責事項：それが機能することを確認するために自分で試したことはありません。

更新：画像を操作して任意のポリゴンに合わせることができるかどうかについては、まだ調査中です。setTransform原則として、これを行うために使用できます。

ctx.save();
ctx.setTransform(m11, m12, m21, m22, dx, dy);
ctx.drawImage(imageObj);
ctx.restore();

パラメータの値を決定することはsetTransform（それが可能である場合）、難しい部分です。私が数学をしたので、それは長い間でした、しかし、私が正しく思い出すならば、ここに何をする必要があるかがあります：

(0,0) --- (w,0)       (x1,y1) --- (x2,y2)
  |         |            |           |
  |  Image  |     =>     |  Morphed  |
  |         |            |           |
(0,h) --- (w,h)       (x3,y3) --- (x4,y4)

ポイントごとに、次の行列演算を実行します。

|m11 m21 dx|   |xI|   |xM|
|m12 m22 dy| X |yI| = |yM|
| 0   0   1|   | 1|   | 1|

8つの方程式、6つの変数（行列要素は変数であり、残りは定数（入力）であることを思い出してください）。解決できない可能性があります。今では、推論（またはグーグル、またはMath.SE ...での質問）と各パラメーターの式の実装だけが問題になります...

更新2：それについての確固たる証拠はありませんが、あなたが望むことを行うことは不可能だと思いますsetTransform。Gimpがその「遠近法」ツールでどのように機能するかを見ると、画像を任意のポリゴンに変換するために、変換行列の3番目の行も変更する必要があります。また、Canvas APIはそのための手段を提供していないようです（通常、アフィン変換のみがサポートされています：平行移動、回転、スケール、せん断、または上記の組み合わせ）。

2D変換に関するこの投稿の引用：

CSS3 2D-変換は、ブロックを平行四辺形にのみ変換できます。たとえば、ブロックを次の形状に変換することはできません。[不規則な形状]これを行うには、CSS33D変換を使用する必要があります。これが、マトリックス構築セットにドラッグするコントロールポイントが4つではなく、3つしかない理由です。

CSS 3D変換の計画はありますが、それがどれほど広くサポートされているかわからないだけでなく、canvas要素（2Dコンテキスト、つまりWebGLは別の話です）がこれをサポートするかどうかはわかりません。要するに、私が知っている手段では、あなたが望むことをすることは不可能です。

于 2012-05-19T02:51:18.917 に答える
3

次を使用して、ポリゴンを画像で塗りつぶすことができますcontext.clip()。

  //create an image
  var img = new Image();
  img.src = 'imgPath/image.png'

  //draw the image when loaded
  img.onload = function(){
      var ctx = canvas.getContext("2d");
      ctx.save();

      //define the polygon
      ctx.beginPath();
      ctx.moveTo(x1,y1);
      ctx.lineTo(x2,y2);
      ctx.lineTo(x3,y3);
      ctx.closePath();

      //draw the image
      ctx.clip();
      ctx.drawImage(img, leftMostXCoor, highestYCoor, polyWidth, polyHeight);

      //fill and stroke are still available for overlays and borders
      ctx.fill();
      ctx.stroke();

      ctx.restore();
  }
于 2013-03-02T21:40:57.967 に答える