iOS 繪製優惠券

2021-08-20 09:30:06 字數 3513 閱讀 1152

樣式要求如下

**如下,self.leftw為左半塊的寬度self.semicircle為左邊分界線的半圓弧半徑c_heigth為控價高度self.radius優惠券圓角半徑

lpath = [uibezierpath bezierpath];


//起點


[lpath movetopoint:cgpointmake(self


.leftw-self


.semicircle, 0)];


// 新增 圓角 我們可以直接把這個圓角看做乙個點 clockwise true: 凸 false:凹


[lpath addarcwithcenter:cgpointmake(self


.leftw, 0) radius:self


.semicircle startangle:m_pi endangle:m_pi_2 clockwise:no];


[lpath addarcwithcenter:cgpointmake(self


.leftw, c_heigth) radius:self


.semicircle startangle:-m_pi_2 endangle:m_pi clockwise:no];


[lpath addarcwithcenter:cgpointmake(self


.radius, c_heigth-self


.radius) radius:self


.radius startangle:m_pi_2 endangle:m_pi clockwise:yes];


[lpath addarcwithcenter:cgpointmake(self


.radius, self


.radius) radius:self


.radius startangle:m_pi endangle:-m_pi_2 clockwise:yes];


[[uicolor whitecolor] set];


// 填充 


[lpath fill];
**如下, 需要注意的是,我們需要另起乙個path. 否則無法分段渲染

uibezierpath *rpath = [uibezierpath bezierpath];


[rpath movetopoint:cgpointmake(self


.leftw, self


.semicircle)];


[rpath addarcwithcenter:cgpointmake(self


.leftw, 0) radius:self


.semicircle startangle:m_pi_2 endangle:-m_pi clockwise:no];


[rpath addarcwithcenter:cgpointmake(c_width-self


.radius, self


.radius) radius:self


.radius startangle:-m_pi_2 endangle:0 clockwise:yes];


[rpath addarcwithcenter:cgpointmake(c_width-self


.radius, c_heigth-self


.radius) radius:self


.radius startangle:0 endangle:m_pi_2 clockwise:yes];


[rpath addarcwithcenter:cgpointmake(self


.leftw,c_heigth) radius:self


.semicircle startangle:0 endangle:-m_pi_2 clockwise:no];


uicolor *rcolor = [uicolor whitecolor];


[rcolor set];


[rpath fill];
**如下, 簡單畫虛線,不多解釋

uibezierpath *linep = [uibezierpath bezierpath];


[linep movetopoint:cgpointmake(c_width-self


.rightw, 0)];


[linep addlinetopoint:cgpointmake(c_width-self


.rightw, c_heigth)];


uicolor *linecolor = self


.seplinecolor;


[linecolor set];


cgfloat fl = ;


[linep setlinedash:fl count:2 phase:5];


[linep stroke];
**如下,cagradientlayer這是乙個漸變色的layercashapelayer可以根據path 生成layer.

需要注意的是gradientlayer.frame一定要設定,且大於左半段面積cashapelayer的fillcolor屬性不要賦值.否則會渲染失敗

cagradientlayer *gradientlayer = [cagradientlayer layer];


gradientlayer.frame = self


.bounds;


gradientlayer.colors = self


.colors;


cashapelayer *masklayer = [cashapelayer layer];


masklayer.path = lpath.cgpath;


[gradientlayer setmask:masklayer];


[self


.layer addsublayer:gradientlayer];
整體加乙個陰影,透明度

優惠券

css繪製卡券優惠券 CSS 實現優惠券樣式

本文將介紹如何使用 css 中的 radial gradient 實現如下圖所示的優惠券樣式效果 繪製基本樣式 首先，我們繪製出優惠券的基本樣式，這很簡單，就不多說了。滿 100 減 30 scss voucher width 600px height 200px display flex left...

小鳥雲優惠券

小鳥雲 是深圳前海小鳥雲計算 旗下的雲計算服務品牌，專注為個人開發者使用者 中小型 大型企業使用者提供一站式核心網路雲端部署服務，促使使用者雲端部署化簡為零，輕鬆快捷運用雲計算。小鳥雲是國內為數不多具有isp idc雙資質的專業雲計算服務商，同時持有系統軟體著作權證書 cnnic位址分配聯盟成員證書...

css繪製卡券優惠券 如何使用css建立乙個優惠券

需求場景 新增優惠券類目,展示使用者的優惠券 常見的設計樣式如下圖,核心為半圓 分步拆解 網上有幾種方案 一種是boder clip的形式,裁剪出4個小半圓角,拼湊在一起 一種是radial gradient徑向漸變,相對上一種需要考慮其相容性 一種是使用背景,特點是載入稍慢,體驗比css差,相容性...