快捷導(dǎo)航

JavaScript 圖片切割效果(放大鏡)第2/4頁

更新時間：2008年12月10日 17:25:39 作者：

自上一個版本的圖片切割效果出來后，雖然也經(jīng)?？吹健翱蚣荛_發(fā)這個如何如何容易”之類的評論，但也受到很多人的肯定，小弟在此感謝大家的支持。

下面說說各部分的作用：

容器：
除了容器本身的作用，通過設(shè)置其背景色來設(shè)置透明的漸變色，由于圖片本身沒有背景色所以要通過容器來設(shè)置；
底圖層：
在容器最底部，作用是顯示非選擇區(qū)域的圖片，透明效果就是在這層設(shè)置；
切割層：
最關(guān)鍵的一個層，在底圖層和控制層之間，在這個層通過clip設(shè)置其可視區(qū)域來實現(xiàn)切割圖片的效果；
控制層：
位于頂部，拖放(_drag)和縮放(_resize)效果就是在這個層實現(xiàn)，根據(jù)其拖放和縮放的結(jié)果控制切割層的切割效果。
這里要注意的是控制層的_drag拖放效果的Transparent要設(shè)為true（詳細看拖放效果的透明背景bug部分）。
要使用縮放需要把Resize設(shè)為true，并設(shè)置各個拖拉對象，程序通過_resize設(shè)置縮放的比例和最少范圍（詳細看拖拉縮放效果）。

下面說說控制層如何控制切割效果：
控制層的拖放和縮放過程中加入了SetPos設(shè)置切割樣式程序，在SetPos程序中根據(jù)控制層的樣式設(shè)置切割層的可視區(qū)域范圍：

復(fù)制代碼代碼如下:

var p = this.GetPos(); 
this._layCropper.style.clip = "rect(" + p.Top + "px " + (p.Left + p.Width) + "px " + (p.Top + p.Height) + "px " + p.Left + "px)"; 

其中GetPos程序，它可以把當(dāng)前控制層的樣式參數(shù)作為一個對象返回：

復(fù)制代碼代碼如下:

with(this._layHandle){ 
return { Top: offsetTop, Left: offsetLeft, Width: offsetWidth, Height: offsetHeight } 
} 

如果理解了的話就會覺得其實原理挺簡單的，不過要想出來還是要一定創(chuàng)意才行，為想出這個方法的人致敬！

切割預(yù)覽

預(yù)覽效果需要設(shè)置Preview屬性為預(yù)覽容器對象，程序會自動給容器插入一個預(yù)覽對象（圖片）。
預(yù)覽效果效果的關(guān)鍵在于如何根據(jù)控制層的數(shù)據(jù)來給預(yù)覽對象定位，這個主要在SetPreview預(yù)覽效果程序中處理。
首先根據(jù)控制層的高寬比置預(yù)覽對象顯示的寬和高（不是圖片本身的寬高哦），這里可以用GetSize程序獲?。?

復(fù)制代碼代碼如下:

var p = this.GetPos(), s = this.GetSize(p.Width, p.Height, this.viewWidth, this.viewHeight), scale = s.Height / p.Height; 

其中GetSize獲取尺寸程序可以根據(jù)圖片實際大小按比例縮放到要設(shè)置的大?。?

復(fù)制代碼代碼如下:

var iWidth = nowWidth, iHeight = nowHeight, scale = iWidth / iHeight; 
//按比例設(shè)置 
if(fixHeight){ iWidth = (iHeight = fixHeight) * scale; } 
if(fixWidth && (!fixHeight || iWidth > fixWidth)){ iHeight = (iWidth = fixWidth) / scale; } 
//返回尺寸對象 
return { Width: iWidth, Height: iHeight } 

可以看出如果后兩個參數(shù)（viewWidth和this.viewHeight）都不設(shè)置就會按原來大小顯示了，然后再按預(yù)覽圖跟控制層的比例設(shè)置預(yù)覽圖的樣式參數(shù)：
var pHeight = this._layBase.height * scale, pWidth = this._layBase.width * scale, pTop = o.Top * scale, pLeft = o.Left * scale;

最后根據(jù)參數(shù)對預(yù)覽對象進行樣式設(shè)置和切割：

with(this._view.style){
//設(shè)置樣式
width = pWidth + "px"; height = pHeight + "px"; top = - pTop + "px "; left = - pLeft + "px";
//切割預(yù)覽圖
clip = "rect(" + pTop + "px " + (pLeft + s.Width) + "px " + (pTop + s.Height) + "px " + pLeft + "px)";
}

這里有點煩亂，但應(yīng)該不難理解就不詳細說明了。

您可能感興趣的文章: