問題タブ [image-clipping]

この画像でわかるように、ボタンに設定された画像は、明確な理由もなく下部がクリップされます。画像のサイズは 24x24pxAutoSizeで、ボタンのプロパティは に設定されていTrueます。

ボタンはウィンドウ上に直接配置されるため、そのサイズを乱すレイアウトはありません。

ユーザーが長方形で画像をクリップできるようにするプログラムが必要です。

https://jsfiddle.net/w3qfLr10/58/

キャンバス上の別の場所をクリックすると、プログラムがその場所で背景画像を切り取ると思っていました。ただし、リンクからわかるように、マウスをクリックするたびに画面が更新されません。背景は、最新のマウス位置で 1 つの四角形だけで切り取られると予想していました。代わりに、すべてのマウス クリックによって背景がクリッピングされているように見えます。Thanks

これが私のコードです：

クリップされた画像を垂直方向に中央揃えしようとしています。画像はレスポンシブです。モバイルでは、画像はフルサイズで見栄えがします。しかし、ブラウザがラップトップ用に拡張されると、画像の下半分全体が切り取られ、上部は何も切り取られません。

CSSで数字をいじってみました。画像の幅が約 800 ピクセルの場合、見栄えは良くなりますが、すべてのクリッピングは下部で行われます。

画像を垂直方向の中央に配置し、レスポンシブのままにするアイデアは大歓迎です. ありがとう！

HTML:

CSS:

JavaScript:

私は、CQC ホーム オートメーション プラットフォーム用の Typescript ベースのタッチ スクリーン クライアントに取り組んでおり、奇妙なことに遭遇しました。さまざまなグラフィック要素が画像の上に重ねられている場所がたくさんあります。画面の一部を更新するときは、クリップ領域を設定して更新します。

しかし、私は常にすべてを線で囲んでしまいました。これは、画像の背後にある下にある色の塗りつぶしの色です。もちろん自分を責めました。しかし、最終的には、自殺する代わりに、ちょっとしたテスト プログラムを実行しました。

drawImage() にはクリップ パスの境界が含まれていませんが、塗りつぶしには含まれているようです。そのため、更新している領域の下にある画像の一部をブリットしても、ターゲット領域が完全に塗りつぶされず、領域の周りに線が残ります。

その単純なプログラムが問題を示した後、私は戻って、画像の更新のためにクリップ領域を 1 つ膨らませましたが、他のすべてのためにそのままにしておきました。今ではすべて機能しています。バグではないことを確認するために、Chrome と Edge でこれをテストしましたが、どちらもまったく同じように動作します。

不思議なことに、クリップ パスが境界を排他的または包括的にすることを意図しているかどうかについてのドキュメントの記述を見たことがありません。