paintcode使用教程：

　　paintcode是一款十分基于ios開(kāi)發(fā)的矢量圖片神器，在paintcode使用教程中用戶可以將矢量圖片轉(zhuǎn)成代碼形式放在ios代碼中，大大的簡(jiǎn)約了ios開(kāi)發(fā)體積，從而可以更好的設(shè)計(jì)開(kāi)發(fā)ios軟件。

　　打開(kāi)我們的PaintCode(最好是正式版而不是試用版)，新建一個(gè)Document。

　　現(xiàn)在界面是這樣的。

　　paintcode默認(rèn)幫我們生成了一個(gè)canvas，就類似于畫圖軟件里面的畫布，然后查看我們的右側(cè)，有一個(gè)面板。

　　這就是屬性面板，看起來(lái)有點(diǎn)像我們XIB里面的屬性面板，包括size什么的。

　　ok，在屬性面板里給我們的canvas起個(gè)名字，就叫“Stopwatch”好了。

　　然后在我們的Code Export下拉框里，選擇StyleKit Drawing & Image Method這個(gè)選項(xiàng)。

　　這個(gè)選項(xiàng)的意思就是說(shuō)，等一會(huì)我們生成的代碼里，既包含繪畫的路徑代碼(一堆貝塞爾曲線什么的)，還會(huì)有一個(gè)方法是返回一個(gè)UIImage類，讓你可以直接放在UIImageView里。還是很貼心的。

　　跟我們的Xcode一樣，paintcode里的canvas也是以左上角作為原點(diǎn)的。所以熟練使用Xib的iOS開(kāi)發(fā)應(yīng)該也能用的很順手。

　　創(chuàng)造我們的Stopwatch

　　下一步，看我們paintcode左上角有一排圖標(biāo).

　　選中圓形的那個(gè)圖標(biāo)，看圖識(shí)字應(yīng)該知道，這個(gè)圖標(biāo)就是用來(lái)畫圓形的。

　　ok，選中之后，在我們的畫布上拖一個(gè)圓出來(lái)，這時(shí)候要按住shift鍵不放來(lái)拖，因?yàn)檫@樣可以保證圓形是個(gè)正圓，而不是個(gè)橢圓。

　　不用太在意圓形的大小，拖完之后我們可以直接在屬性面板里更改。很簡(jiǎn)單。

　　ok，現(xiàn)在我們的畫布上有一個(gè)圓了。然后把它的坐標(biāo)改為(15，30)，長(zhǎng)寬都改為220.像這樣圖一樣。

　　然后，點(diǎn)擊Fill(就是圓的填充色)，在下拉窗口中選擇'Add New Color'，創(chuàng)建一個(gè)我們自己的顏色。

　　然后在彈出的窗口里輸入顏色的HEX值#118DDA.如圖所示

　　點(diǎn)擊彈出窗口的外面，讓窗口消失，ok我們有了自己的顏色。以后要使用這個(gè)色值的時(shí)候軟件會(huì)直接顯示這個(gè)顏色。

　　剛才我們選了畫圓的按鈕，這時(shí)候我們選擇畫方塊的按鈕，因?yàn)槲覀儸F(xiàn)在要畫一個(gè)方塊。

　　隨便在畫板上拖一個(gè)方塊，并且把Rect改為下面的值。

　　X:114

　　Y:2

　　W:22

　　H:34

　　改完之后你的畫板應(yīng)該是現(xiàn)在這個(gè)樣子。

　　然后我們這時(shí)候還需要拖一個(gè)方塊，隨便放在畫板的一個(gè)角落，然后把大小改為寬30，高20.如圖。

　　然后，我們?cè)偻弦粋€(gè)方塊，這時(shí)候按住shift鍵不放，這樣可以保證方塊的長(zhǎng)寬比一致(也就是正方形)，也是隨便放個(gè)位置就行了。如圖。

　　可能有人要問(wèn)了，我們拖的這兩個(gè)小方塊是干嘛的。別著急，繼續(xù)往下看。

　　我們選中稍大的那個(gè)方塊，到右邊的屬性窗口點(diǎn)開(kāi)Transforms，然后把Rotation改為-45°。

　　現(xiàn)在應(yīng)該是這樣的。

　　然后選中我們的小正方形，把他拖到我們旋轉(zhuǎn)-45°的方塊上。如圖

　　注意拖動(dòng)的時(shí)候軟件會(huì)有提示，你感覺(jué)對(duì)齊了松手就可以了。

　　拖動(dòng)到正確位置后，按住shift不放，同時(shí)選中這兩個(gè)矩形，點(diǎn)擊右上角的這個(gè)圖標(biāo).

　　這個(gè)圖標(biāo)叫做Union，意思就是把兩個(gè)圖形合并成為一個(gè)。

　　ok，點(diǎn)完之后再把這個(gè)合二為一的圖片坐標(biāo)改為下圖的值。

　　好的，我們現(xiàn)在的畫板看起來(lái)應(yīng)該是這樣的。

　　保存一下。起名叫PaintCodeTutorial就行了。

　　創(chuàng)建我們的Stopwatch指針。

　　現(xiàn)在我們有了表盤，還缺表針?，F(xiàn)在我們就來(lái)創(chuàng)建我們的表針。

　　我們先創(chuàng)建一個(gè)新的畫板，現(xiàn)有畫布的旁邊右鍵點(diǎn)擊

　　創(chuàng)建一個(gè)200*200的畫布，注意，如果你在右鍵點(diǎn)擊之前，第一個(gè)畫布處于選中狀態(tài)的時(shí)候，他會(huì)出現(xiàn)(250 x 250) Size of Stopwatch 這個(gè)選項(xiàng)。還是很貼心的。因?yàn)樗麜?huì)估計(jì)你新創(chuàng)建的畫布會(huì)想要和第一個(gè)畫布大小相同。

　　ok，創(chuàng)建完成之后把我們的新畫布寬改為250，長(zhǎng)改為220.并且把我們的StyleKit改為Drawing Method，意思就是等一會(huì)只生成畫圖的代碼而不生成返回UIImage的代碼 如圖。

　　修改完之后，先不用管他。回到我們的上一個(gè)畫布。

　　拖一個(gè)圓到我們的第一個(gè)畫布。如圖。

　　然后把這個(gè)圓的顏色改為白色。

　　把這個(gè)圓的寬高都改為30.并且坐標(biāo)放到我們表盤的中央。放完之后，我們的圓的X和Y應(yīng)該是110，125：

　　然后再拖一個(gè)矩形到我們的表盤上，寬高分別為8，115.然后拖到如圖的位置。大概準(zhǔn)就行了。

　　ok，是不是已經(jīng)很像表針了。

　　這時(shí)候按住shift選中我們的長(zhǎng)條矩形和圓形，打開(kāi)屬性面板的Transforms下拉框，我們會(huì)看到這樣的東西。

　　那個(gè)綠色的小圓是什么呢?

　　其實(shí)就是類似于我們CALayer的anchorPoint(錨點(diǎn))，如果你旋轉(zhuǎn)一定角度的時(shí)候，綠色的小圓就是我們的圖形會(huì)以此為圓心旋轉(zhuǎn)的敵方。

　　你可以隨意拖動(dòng)這個(gè)綠色的小圓來(lái)指定圖形的錨點(diǎn)。這時(shí)候我們選中小圓，把他的錨點(diǎn)拖到圓的中心。如圖

　　矩形不用管它。

　　然后我們把兩個(gè)圖形按照上面的方法，Union一下，合并成一個(gè)圖。然后還是打開(kāi)屬性面板的Transforms下拉框，你會(huì)看到這樣。

　　綠色的小圓在我們圖形的左上角，說(shuō)明我們的錨點(diǎn)在圖形的左上角，這明顯不對(duì)啊，真實(shí)的指針哪有這么轉(zhuǎn)的，應(yīng)該轉(zhuǎn)的時(shí)候是以小圓的那個(gè)圓心為中心啊。

　　所以我們把綠色的小圓拖到這個(gè)位置.

　　ok，我們的表針弄好了。我們把它復(fù)制到第二個(gè)畫布上。

　　并且把坐標(biāo)改為X:125,Y:110.

　　如圖所示。

　　改好之后，點(diǎn)擊這里.

　　然后在我們的StyleKit Colors里。

　　選擇我們之前創(chuàng)建的一個(gè)顏色。

　　行了，其他的不用管了。不過(guò)確保你的StyleKit Drawing Methods看起來(lái)是這樣的。

　　然后右邊的屬性欄修改一下name什么的。

　　點(diǎn)擊Export按鈕。

　　會(huì)有一個(gè)彈窗。

　　點(diǎn)擊Export然后save。你就會(huì)看到paintcode幫你導(dǎo)出了這兩個(gè)文件。

最新評(píng)論