問題タブ [drawimage]

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.

0 投票する
2 に答える
1941 参照

javascript - キャンバスでスキューするときに新しい幅を計算する

プロジェクトにキャンバスを使用していますが、歪んでいる要素がいくつかあります。y値のみをスキューしているので、スキューした後の画像の新しい幅を知りたいだけです(別のキャンバス要素に揃えることができます)。以下のコードをチェックして、私が何を意味するかを確認してください

目標は、42x60の画像がXx60の画像になったことを知ることです。これにより、0,0で描画する前に変換を行うことができます。各画像を個別に測定するのは簡単ですが、プロジェクト全体で異なるスキュー値と高さ/幅があり、位置合わせする必要があります。現在、私はこのコードを使用しています(25〜42の幅の画像で適切に機能します):

この式はすぐに崩壊しますが、画像が広くなるにつれて(このような直線的な値ではなく、傾斜した式だと思います)。キャンバスがスキューに対して何をするかについてのアイデアはありますか?

0 投票する
1 に答える
128 参照

javascript - Chrome の問題: Chrome が画像を取得/描画しない

HTMLでサムネイルギャラリーを作成しています。サムネイル画像を取得するには、次のようにします

これはうまくいっています。これで、これらのサムネイルのクリック イベントで機能する関数ができました。これは次のようなものです。

今、HTMLキャンバスにnextImageオブジェクトを描画しています

ctx.drawImage(nextImage, 0, 0, 100, 130); このコード全体は mozilla firefox で動作しますが、google chrome では動作しません。nextImage オブジェクトの src 属性について、chrome がサーバーに再度リクエストを送信していないようです。代替ソリューションはありますか?

0 投票する
0 に答える
179 参照

html - キャッチされないエラー:iPadでのみINDEX_SIZE_ERR

私はアプリケーションでいくつかのキャンバス描画を行っており、それはすべてのブラウザーでうまく機能します(明らかなie7 / 8を除く)が、iPadでも機能させる必要があります。iPadでデバッグコンソールを見ると、次のエラーが表示されます。

INDEX_SIZE_ERR:DOM例外1:インデックスまたはサイズが負であるか、許可された値を超えていました

私はここでエラーについて他のスレッドのいくつかを見ましたが、それらのどれも答えられたようには当てはまらないようです(特にデスクトップバージョンでもこのエラーが見られないためです)。

エラーはコードのこの部分で発生します:

ログの場合、すべての正の数を取得しており、幅/高さは正しいです。largeImageは、HTMLマークアップの一部である画像を参照しているため、描画しようとする前に画像が読み込まれないという問題ではないと思います(前述のように、幅/高さのログが適切に記録されるため、これは問題ではありません)。

なぜこれがiPadで起こっているのに、デスクトップでは起こっていないのかについて、誰かが何か考えを持っていますか?

0 投票する
2 に答える
346 参照

java - 画像がアニメーションに描画されない

Java アプレットでの画像の読み込み/表示に問題があります。画像を間違ってロードしているのか、それとも間違ってアクセスしているのかわかりません。船と背景を描画するコードは次のとおりです (小惑星のようなゲームです)。背景は正しく描画されますが、船は描画されません。これは、私が扱っているメイン クラス メソッドです。

クラスの先頭に ship クラスのインスタンスを作成します。ただし、メソッド (「Ship ship = new Ship();」など) で ship クラスをインスタンス化しようとすると、変数「ship」は使用されないと表示されます。

船のクラス全体は次のとおりです。

そのまま実行するとエラーにはなりませんが、船が表示されません。船のインスタンスを上部以外の場所に作成しようとすると、NullPointerException が発生します。

アップデート

これが私のメインクラス全体です:

0 投票する
1 に答える
1206 参照

javascript - Windows7でのHTML5CanvasdrawImageの問題、ただしFirefoxでのみ

開発中のプログラムに問題があります( www.energematrice6.com/gview2で確認できます) 。

銀河ビューアは、6つの異なるレイヤーに星を描きます。バックレイヤーは正常に機能します(単純なストロークコマンドを使用)。上位3つのレイヤーは、drawImage()機能を使用して、保存された画像を取得し、それをキャンバスに描画します(関数starGradDrawおよびstarGradDraw2を使用)。

これらの画像は、プログラムが最初に実行され、オブジェクト変数(基本的には単なるバッファ)に保存されたときに、別の関数によって作成されました。

自宅のコンピューター、ラップトップ、妻のコンピューター、およびこれをテストした(または友人にテストさせた)他のほぼすべてのマシンで、すべてが正しく機能します。

仕事用のコンピューター(自宅で使用しているのと同じバージョン)のFirefox 10.0.2で開こうとすると、星の最初の3つのレイヤーが空白になります。私が考えることができる他の唯一の違いは、私の自宅のコンピューターのどれも64ビットオペレーティングシステム、特にWindows7を使用していないということです。

他のすべてはまだプログラムで正常に動作しているようであり、firebugはエラーをポップしていません。画像を描画する(またはプログラムを停止する)だけではありません。次に何をしようか本当にわかりません。

何か案は?

(必要に応じてコードを貼り付けることもできますが、プログラムの長さは1,000行を超えており、問題がどこで発生するのか、このマシンでのみエラーが発生するのかわかりません。)

0 投票する
1 に答える
5965 参照

html - HTML5キャンバスのdrawImageが最初のクリックで機能しない

テキストといくつかの画像を表示するためにjavascript関数を使用しているキャンバスがあります。私が直面している問題は、クリックが機能を実行してテキストを表示するが、常に画像を配置するとは限らないことです。もう一度クリックすると、画像が表示されます。この動作は、すべてのブラウザーで一貫しています。コマンドは遅くはありません。最初は画像の表示に失敗するだけです。ティア

0 投票する
1 に答える
899 参照

javascript - Chrome や Firefox よりも Safari の方が drawImage の実​​行速度が速いのはなぜですか?

楽しみのために小さな HTML キャンバス ビジュアライザーを作成しましたが、Chrome ではひどく動作し、Firefox ではかなり動作が悪いことに気付きましたが、iPhone や iPad を含む Safari ではまったく驚くほど動作します!

誰でも理由を説明できますか?

コードはかなり単純である必要があると思いますが、基本的には、マウス (またはタッチ) の位置のポイントを描画してから、drawImage を使用してキャンバスを一時的なキャンバスにコピーしています。そこからディスプレイ キャンバスをクリアし、一時キャンバスをコピーして戻します (4 回)。ただし、回転、オフセット、透明度、スケールなどのいくつかを適用し (そしていくつかの異なる globalCompositeOperations をいじって)、すべて drawImage を使用します。したがって、drawImage は各ループで合計 5 回呼び出されます。

ここでデモを見ることができます: http://lakenen.com/vis.html

どんな洞察も大歓迎です!

PS。可能であれば、iPad でこれを試してください。マルチタッチでかなりきれいです:)

0 投票する
2 に答える
859 参照

c# - Draw image で x 座標と y 座標を動的に設定する

DrawImage を使用して画像のサイズを変更しています。

ここで、ソース画像は座標 0 から始まります
。x 座標と y 座標を動的に計算する必要があるとします。どうすればよいでしょうか?
デフォルトでは、画像は位置 20 (つまり x) と 20 (つまり y) から開始する必要があります。
フォームのサイズを変更すると、サイズ変更された画像に応じて比例して計算する必要があります。つまり、デフォルトの場合、フォームのサイズ変更よりも20の場合はどれくらいですか?

ありがとう

0 投票する
1 に答える
452 参照

qt - QPainter::drawImage (QPoint が (0,0) でない場合)

QPainter::drawImage に問題があります。VNC サーバーにアプリにアクセスするための KameleonVNC ウィジェットがあります。そして、私はそれをQFrameに入れました。しかし、それは私が好きではない左上隅に画像を描いています。コードを見て、VNCサーバーからの画像が座標0,0でQPainter::drawImageQPoint(0,0)またはQRect座標0,0で描画されているのを確認しました。しかし、座標を別のものに変更すると、予測できない結果が得られました。絵が変わったところだけ小さな絵を描いていると思います。しかし、drawImage でこのバグを修正する方法がわかりません。

0 投票する
2 に答える
30091 参照

java - 別の画像の上に画像を描く方法は?

ランダムな都市での交通ネットワークシミュレーションに関するJavaプロジェクトがあり、このプロジェクトを実装する方法を見つけることができたので、各交差点を基本的に拡張JPanelクラス(Carrefourという名前)のセクションに分割しました。 。車両を描画して道路を通過させる方法に行き詰まるまで、すべてがうまく機能します。

だから私の問題は、別の画像(道路)の上に画像(車両の画像)を描く方法ですか?