0

以下のコードを使用するのと同様に、文字通りキャンバスウィジェットのキャンバスを画像に設定したいのですが、APIにはこれを行うものがないようです。何か案は？文字通り.jsファイルで以下のコードを使用することはできません...

imageObj.onload = function () {
  ctx.drawImage(imageObj, 0, 0);
};
imageObj.src = '<?php echo $path . $image_name; ?>';

編集：

私が今持っているコード（以下のコメントを参照）：

$(document).ready(function () {
  $('.literally').literallycanvas();
  var ctx = document.getElementsByTagName('canvas')[0].getContext('2d');
  var imageObj = new Image();
  imageObj.onload = function () {
    ctx.drawImage(imageObj, 0, 0);
  };
  imageObj.src = '<?php echo $path . $image_name; ?>';

私はliterallycanvas.jsファイルでこのコードを使用しておらず、そのファイルを変更していないことに注意してください。そこでコードを使用する必要がありますか？もしそうなら、JavascriptファイルのPHPコードはどうですか？PHPファイルに変更する必要がありますか？

4

3 に答える 3

1

多くの人に有効な簡単な解決策は、背景を透明に設定し、キャンバスの背後に画像を配置することです。

var myLC = $('.literally').literallycanvas({backgroundColor: 'transparent'});

「バッファ コンテキスト」に描画することで、思い描いていたことを正確に達成できます。「LiterallyCanvas.prototype.repaint」関数を編集して、次のようにする必要があります。

var img = new Image();
img.src = "photo.jpg";

this.bufferCtx.drawImage(img, 90, 0, 269, 336);

「drawBackground」ブール値をチェックする IF を削除しましたが、それが必要かどうかは完全にはわかりません。この手法を使用すると、描画を開始するまで画像は表示されません。これは、外部 JS からバッファ コンテキストにアクセスする方法です。

myLC[0].literallycanvas.bufferCtx.drawImage(img, 90, 0, 269, 336);

パフォーマンスについてはテストしていませんが、かなりうまく機能しているようです。

于 2013-07-06T17:44:19.720 に答える
0

それは働いているはずです。最初にキャンバスのコンテキストを取得する必要があります...

var ctx = document.getElementsByTagName('canvas')[0].getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
   ctx.drawImage(imageObj, 0, 0);
};
imageObj.src = '<?php echo $path . $image_name; ?>';

Literally Canvas 自体のサンプル ページでテストしましたが、問題なく動作しています。

于 2013-03-15T09:29:02.330 に答える