使用JavaScript+CSS3+SVG clipPath實現自適應被裁剪圖片對象實例

編程語言 CSS JavaScript Polygon IT豆豆 2017-06-20

CSS3中引入的clip-path(裁剪路徑)屬性是一個很強大的特性。clip-path的含義如下圖所示,好比剪紙一樣,你用剪刀沿著某條路徑把目標對象(圖像或元素)裁剪成我們想要的形狀。

使用JavaScript+CSS3+SVG clipPath實現自適應被裁剪圖片對象實例

clip-path支持多種方式,如基本的圖形(多邊形polygon(), 圓形circle(), inset() (用來定義內部矩形), 和橢圓 ellipse()),也支持直接引用SVG中的clipPath元素。先看二個效果圖

使用JavaScript+CSS3+SVG clipPath實現自適應被裁剪圖片對象實例

使用JavaScript+CSS3+SVG clipPath實現自適應被裁剪圖片對象實例

使用JavaScript+CSS3+SVG clipPath實現自適應被裁剪圖片對象實例

通常簡單的裁剪,我們直接使用基本圖形,或者使用在線工具輔助生成,我們推薦使用:

http://www.ikinsoft.com/clippath/clippath.html

來生成一些簡單的裁剪路徑,代碼如下:

/* Using a CSS basic shape function */

.element {

clip-path: polygon(...); /* or one of the other shape functions */

}

對於更為複雜的裁剪,使用SVG無疑是更好的選擇,我們可以在AI或Inkscape中創作好矢量圖,然後根據其路徑(path)數據生成相應的clipPath元素,然後在CSS3中直接引用,代碼如下:

/* Referencing an SVG clipPath */

.element {

clip-path: url(#svgClipPathID);

}

但是在使用SVG clipPath元素時,經常會遇到單位不匹配的情況,因為通常通過工具生成的g元素,會應用一些變換(如位移和縮放):

<g transform="translate(0.000000,126.000000) scale(0.100000,-0.100000)"><clipPath>your paths here</clipPath></g>

而在CSS3直接引用clipPath時,不會自動去處理這些變換,需要我們自己來處理,

把path數據轉換成百分比,然後給clipPath添加clipPathUnits="objectBoundingBox"屬性來自適應:

<svg width="0" height="0">

<defs>

<clipPath id="svgPath" clipPathUnits="objectBoundingBox">

<!-- your paths here -->

</clipPath>

</defs>

</svg>

clipPathUnits 屬性用來指定<clipPath>元素內容的座標系,有2種取值:

clipPathUnits = "userSpaceOnUse | objectBoundingBox"

userSpaceOnUse表示當前網頁所使用的屏幕座標系,而objectBoundingBox則把座標空間的原點調整到被裁剪對象的左上角,座標空間的長寬設定為該元素的長寬。

生成polygons圖形clipPath數據的JavaScript代碼,如下:

$.each(shape_array.polygon, function (i, shape) {

paths = '';

$.each(shape.coords, function (i, coord) {

type = "polygon";

var x = coord[0] + "%";

var y = coord[1] + "%";

var path = 'clip-path: polygon()';

var coord = '';

if (i == shape.coords.length - 1) {

// last coordinate to add, omits a comma at the end

paths += x + ' ' + y;

var clip_path = 'polygon(' + paths + ')';

appendFigure(clip_path, shape);

} else {

// loops through each coordinate and adds it to a list to add

paths += x + ' ' + y + ', ';

}

});

});

相關推薦

推薦中...