JavaScript画像切り取り効果（虫眼鏡）

前バージョンではこのようなエフェクトに触れるのが初めてで、主要な機能が3つまとめて開発されていたため、能力が限られており、エフェクトを実現するだけでした。
最近、ドラッグアンドドロップ効果とズーム効果を別々に研究し、それらを整理して改善した後、個人的には効果がすでに優れていると感じています。
これは単なるエフェクトであり、実際のカット画像を取得するには、画像カット システムを参照してください。

投稿するにはコードが多すぎるので、レンダリングを提供する必要があります:

プログラムの説明

このエフェクトは主に 3 つの部分に分かれています: ドラッグレイヤーのドロップ、ズーム、画像の切り取り（プレビューを含む）。
このうち、レイヤーのドラッグ＆ドロップとレイヤーの拡大縮小については、別の記事で詳しく説明していますので、ここでは画像の切り取り部分について説明します。

写真の切り抜き

写真の切り抜きのデザインに関しては、次の 3 つの方法があります。

写真を背景画像として設定し、背景の位置を設定することで実現されます。画像を作成しますが、これには欠点があります。画像の通常の比率に従ってのみ実現できるため、十分な柔軟性がありません。
画像を切り取りオブジェクトに配置し、画像の上部と左側を設定します。実現可能ですが、以下のより簡単な方法があります。
これは、画像のクリップを設定することで実現されます。
ここではメソッド 3 の実装方法を示します。このメソッドは、今年の「コレクション」コードから見られます。まずクリップについて話しましょう。
クリップの機能は、「 の表示領域を取得または設定する」ことです。 Visible 領域の外側の部分は透明になります。 ”
オブジェクトの左上隅から計算された 4 つのオフセット値を (0,0) 座標に対して右上、下、左の順に提供します。クリップする。
例:

コードをコピーします。

p {position:absolute width:60px; 60px;clip:rect(0 20 50 10); }

position:absolute の設定が必要であることに注意してください (詳細についてはマニュアルを参照してください)。
具体的な実装原理について話しましょう:

まず、3 つのレイヤーが挿入されるコンテナー (_Container) が必要です。

ベースレイヤー (_layBase): 半透明の画像。
カットレイヤー (_layCropper): 通常表示される部分;
コントロールレイヤー (_layHandle): 表示を制御する部分。
このうち、ベースレイヤーとカッティングレイヤーはプログラムが自動で作成した絵で、コントロールレイヤーは自己定義レイヤー(プログラム内のp)です。
ベースレイヤーとカットレイヤーは完全に重なる必要があります。両方のレイヤーはプログラムの左上隅に絶対に配置されます:

コードをコピーします コードは次のとおりです。

this._layBase.style.top = this._layBase.style.left = this._layCropper.style.top = this._layCropper.style.left = 0; >

各レイヤーの順序を保証するために、重ね順も設定する必要があります。