中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

下面說說各部分的作用：

• 容器：
  除了容器本身的作用，通過設(shè)置其背景色來設(shè)置透明的漸變色，由于圖片本身沒有背景色所以要通過容器來設(shè)置；
• 底圖層：
  在容器最底部，作用是顯示非選擇區(qū)域的圖片，透明效果就是在這層設(shè)置；
• 切割層：
  最關(guān)鍵的一個(gè)層，在底圖層和控制層之間，在這個(gè)層通過clip設(shè)置其可視區(qū)域來實(shí)現(xiàn)切割圖片的效果；
• 控制層：
  位于頂部，拖放(_drag)和縮放(_resize)效果就是在這個(gè)層實(shí)現(xiàn)，根據(jù)其拖放和縮放的結(jié)果控制切割層的切割效果。

這里要注意的是控制層的_drag拖放效果的Transparent要設(shè)為true（詳細(xì)看拖放效果的透明背景bug部分）。
要使用縮放需要把Resize設(shè)為true，并設(shè)置各個(gè)拖拉對象，程序通過_resize設(shè)置縮放的比例和最少范圍（詳細(xì)看拖拉縮放效果）。

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

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ù)作為一個(gè)對象返回：

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

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

切割預(yù)覽

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

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

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

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 }

可以看出如果后兩個(gè)參數(shù)（viewWidth和this.viewHeight）都不設(shè)置就會(huì)按原來大小顯示了， 然后再按預(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ù)覽對象進(jìn)行樣式設(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)";
}

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

出處：藍(lán)色理想
責(zé)任編輯：bluehearts

上一頁 JavaScript 圖片切割效果 [1] 下一頁 JavaScript 圖片切割效果 [3]

◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。