2. 程式人生 > >SVG（可縮放向量圖形）繪製工具Method Draw

SVG（可縮放向量圖形）繪製工具Method Draw

阿新 • • 發佈：2019-01-24

給大家介紹一個製作svg的工具
當我們在網頁上要繪製一個非常複雜的svg圖片的時候
可以藉助於Method Draw工具進行繪製
繪製完畢後可以匯出為程式碼拷貝到我們的專案當中
不需要下載，這是一個網頁工具
工具地址：傳送門
雖然這個網頁bug很多
不過這依然是一個不錯的工具

畫布

點選畫布，在頁面的右側我們可以調整畫布屬性

點選屬性，滾動滑輪可以微調
或者直接雙擊修改屬性值

工具欄

左側工具欄

就像畫圖的工具欄一樣

形狀庫

形狀庫有很多備選圖形

選擇一個圖形後
左右鍵同時按可以再次選擇圖形

貝塞爾曲線

貝塞爾曲線繪製
在畫布中某點按住滑鼠左鍵，該點就是繪製弧的起點
然後在某點滑鼠左鍵擡起， 鬆開的點就是貝塞爾曲線的控制點
再次點選另一點，就是弧的終點

形狀調整

點選你繪製的圖形在右側可以控制樣式
比如說畫一個圓

可以調整它在畫布的 (x,y)座標、橫縱半徑、旋轉角度、透明度、模糊度
以及位置（左對齊、右對齊、居中…）還有邊線屬性

匯出程式碼

畫完之後我們可以點選上面選單欄view中的source匯出為程式碼
或者直接Ctrl+U
然後我們就可以將程式碼拷貝出來
下面就是我用這個Method Draw工具繪製的一個叮噹貓
雖然很醜b(￣▽￣)d，但是完全可以實現
（哦對了，補充一點，Ctrl+↑/↓ 可以調整圖層深度，類似於z-index屬性）

<svg width="580" height=
 
"400" xmlns="http://www.w3.org/2000/svg" stroke="null" style="vector-effect: non-scaling-stroke;">
    <g stroke="null">
    <title stroke="null">background</title>
    <rect stroke="null" fill="#ffffff" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
    <g stroke=
 
"null" style="vector-effect: non-scaling-stroke;" display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
    <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
    </g>
    </g>
    <g stroke="null">
    <title stroke="null">Layer 1</title>
    <rect stroke="#000" id="svg_80" height="110" width="132.222222" y="215.410635" x="221.944444" stroke-width="1.5" fill="#007fff"/>
    <rect stroke="#000" style="vector-effect: non-scaling-stroke;" transform="rotate(40.294403076171875 369.72222900390625,238.4629669189453) " id="svg_81" height="18.333333" width="67.777778" y="229.296298" x="335.833332" stroke-opacity="null" stroke-width="0" fill="#007fff"/>
    <rect stroke="#ffffff" transform="rotate(21.50663948059082 199.36041259765628,217.56362915039057) " id="svg_78" height="19.601491" width="66.223528" y="207.762876" x="166.248638" stroke-opacity="null" stroke-width="0" fill="#007fff"/>
    <ellipse stroke="#000" style="vector-effect: non-scaling-stroke;" ry="58" rx="83.5" id="svg_32" cy="153.473684" cx="290.00001" stroke-width="1.5" fill="#ffffff"/>
    <ellipse stroke="#000" style="vector-effect: non-scaling-stroke;" ry="58" rx="83.5" id="svg_36" cy="153.473684" cx="290.00001" stroke-width="1.5" fill="#ffffff"/>
    <ellipse stroke="#000" style="vector-effect: non-scaling-stroke;" ry="58" rx="83.5" id="svg_38" cy="153.473684" cx="290.00001" stroke-width="1.5" fill="#ffffff"/>
    <ellipse stroke="#000" ry="100" rx="100" id="svg_13" cy="137.631583" cx="290.000002" stroke-opacity="null" stroke-width="1.5" fill="#007fff"/>
    <ellipse stroke="#000" ry="58" rx="83.5" id="svg_2" cy="153.473684" cx="290.00001" stroke-width="1.5" fill="#ffffff"/>
    <ellipse stroke="#000" ry="52.5" rx="56" id="svg_4" cy="249.055556" cx="289.99999" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="#ffffff"/>
    <rect stroke="#000" rx="12" id="svg_3" height="19" width="158" y="196" x="211" stroke-width="1.5" fill="#ff0000"/>
    <ellipse stroke="#000" ry="12" rx="12" id="svg_6" cy="216.368421" cx="289.99999" stroke-width="1.5" fill="#bfbf00"/>
    <line stroke="#000" style="vector-effect: non-scaling-stroke;" stroke-linecap="null" stroke-linejoin="null" id="svg_8" y2="210.52632" x2="300.263148" y1="210.52632" x1="279.736832" stroke-opacity="null" stroke-width="1.5" fill="none"/>
    <line stroke="#000" style="vector-effect: non-scaling-stroke;" stroke-linecap="null" stroke-linejoin="null" id="svg_10" y2="213.157899" x2="301.578943" y1="213.157899" x1="278.421048" stroke-opacity="null" stroke-width="1.5" fill="none"/>
    <ellipse stroke="#000" style="vector-effect: non-scaling-stroke;" ry="3" rx="3" id="svg_11" cy="222.368425" cx="289.999986" stroke-opacity="null" stroke-width="1.5" fill="#000000"/>
    <line stroke="#000" style="vector-effect: non-scaling-stroke;" stroke-linecap="null" stroke-linejoin="null" id="svg_12" y2="227.894741" x2="289.999995" y1="224.21053" x1="289.999995" stroke-opacity="null" stroke-width="1.5" fill="none"/>
    <ellipse stroke="#000" ry="0.263158" id="svg_14" cy="177.631583" cx="289.999998" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="#ffffff"/>
    <ellipse stroke="#000" ry="25.526316" rx="21.052632" id="svg_17" cy="100" cx="268" stroke-opacity="null" stroke-width="1.5" fill="#ffffff"/>
    <ellipse stroke="#000" ry="25.526316" rx="21.052632" id="svg_16" cy="100" cx="312" stroke-opacity="null" stroke-width="1.5" fill="#ffffff"/>
    <ellipse stroke="#000" style="vector-effect: non-scaling-stroke;" ry="5" rx="2.368416" id="svg_19" cy="110.789478" cx="275" stroke-opacity="null" stroke-width="1.5" fill="#000000"/>
    <ellipse stroke="#000" style="vector-effect: non-scaling-stroke;" ry="5" rx="2.368416" id="svg_18" cy="111.315794" cx="305" stroke-opacity="null" stroke-width="1.5" fill="#000000"/>
    <ellipse stroke="#000" style="vector-effect: non-scaling-stroke;" ry="8" rx="8" id="svg_20" cy="123.684215" cx="290" stroke-opacity="null" stroke-width="1.5" fill="#ff0000"/>
    <ellipse stroke="#000" style="vector-effect: non-scaling-stroke;" ry="4" rx="3" id="svg_22" cy="122" cx="292.894737" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#ffffff"/>
    <path stroke="#000" id="svg_24" d="m43.947368,172.105267" opacity="0.5" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="#ffffff"/>
    <line stroke="#000" stroke-linecap="null" stroke-linejoin="null" id="svg_27" y2="181.578951" x2="290.263158" y1="132.105267" x1="289.736842" opacity="0.5" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>
    <path stroke="#000" id="svg_29" d="m241.842104,166.842109c0,0 38.421053,30 96.315789,-0.526316" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="#ffffff"/>
    <line stroke="#000" stroke-linecap="null" stroke-linejoin="null" id="svg_30" y2="179.473688" x2="289.999986" y1="131.578951" x1="289.999986" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>
    <line stroke="#000" style="vector-effect: non-scaling-stroke;" stroke-linecap="null" stroke-linejoin="null" id="svg_33" y2="148.421057" x2="266.578947" y1="147.894741" x1="219.736842" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>
    <line stroke="#000" style="vector-effect: non-scaling-stroke;" stroke-linecap="null" stroke-linejoin="null" id="svg_31" y2="148.947372" x2="359.736845" y1="148.421057" x1="312.89474" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>
    <line stroke="#000" style="vector-effect: non-scaling-stroke;" stroke-linecap="null" stroke-linejoin="null" id="svg_40" y2="131.578951" x2="219.210526" y1="141.052636" x1="267.105263" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>
    <line stroke="#000" style="vector-effect: non-scaling-stroke;" transform="rotate(-20 336.31579589843744,136.84210205078114) " stroke-linecap="null" stroke-linejoin="null" id="svg_39" y2="132.105267" x2="312.368421" y1="141.578951" x1="360.263158" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>
    <line stroke="#000" style="vector-effect: non-scaling-stroke;" transform="rotate(160 243.6842193603515,159.99999999999997) " stroke-linecap="null" stroke-linejoin="null" id="svg_37" y2="155.263162" x2="219.736842" y1="164.736846" x1="267.631579" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>
    <line stroke="#000" style="vector-effect: non-scaling-stroke;" transform="rotate(180 336.3157958984375,159.47369384765628) " stroke-linecap="null" stroke-linejoin="null" id="svg_34" y2="154.736845" x2="312.368423" y1="164.21053" x1="360.26316" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>
    <line stroke="#000" style="vector-effect: non-scaling-stroke;" stroke-linecap="null" stroke-linejoin="null" id="svg_44" y2="254.21053" x2="321.578947" y1="254.21053" x1="258.421053" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>
    <path stroke="#000" id="svg_46" d="m259.736842,254.736846c0,0 28.421053,67.894737 61.052632,0" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="#ffffff"/>
    <path stroke="#000" id="svg_48" d="m-144.27,87.983953l0.745,0l0,0c0.411452,0 0.745,0.333548 0.745,0.745c0,0.411452 -0.333548,0.745 -0.745,0.745l-0.745,0l0,-1.49z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="#ffffff"/>
    <line stroke="#000" style="vector-effect: non-scaling-stroke;" stroke-linecap="null" stroke-linejoin="null" id="svg_54" y2="320.52632" x2="354.999997" y1="228.421057" x1="354.473681" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>
    <line stroke="#000" style="vector-effect: non-scaling-stroke;" stroke-linecap="null" stroke-linejoin="null" id="svg_56" y2="321.578951" x2="221.842105" y1="229.473688" x1="221.315789" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>
    <line stroke="#000" stroke-linecap="null" stroke-linejoin="null" id="svg_51" y2="200.52632" x2="182.894737" y1="214.21053" x1="218.684211" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>
    <path stroke="#000" id="svg_68" d="m279.210526,325.789478" opacity="0.5" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>
    <line stroke="#000" stroke-linecap="null" stroke-linejoin="null" id="svg_61" y2="237.41893" x2="222.405638" y1="218.918133" x1="176.052632" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>
    <ellipse stroke="#000" ry="13.947368" rx="14.210527" id="svg_50" cy="206.578952" cx="170.263158" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="#ffffff"/>
    <ellipse stroke="#000" ry="13.947368" rx="14.210527" id="svg_49" cy="260.789476" cx="398.157889" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="#ffffff"/>
    <line stroke="#000" stroke-linecap="null" stroke-linejoin="null" id="svg_57" y2="237.339185" x2="354.473684" y1="262.602343" x1="383.825092" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>
    <line stroke="#000" stroke-linecap="null" stroke-linejoin="null" id="svg_58" y2="214.736846" x2="356.578947" y1="246.921852" x1="394.877725" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>
    <ellipse stroke="#000" style="vector-effect: non-scaling-stroke;" ry="2.173811" rx="4.057779" id="svg_97" cy="324.912246" cx="282.740307" stroke-opacity="null" stroke-width="0" fill="#007fff"/>
    <ellipse stroke="#000" ry="9.736842" rx="39.736841" id="svg_60" cy="329.210529" cx="242.105264" stroke-opacity="null" stroke-width="1.5" fill="#ffffff"/>
    <ellipse stroke="#000" style="vector-effect: non-scaling-stroke;" ry="2.173811" rx="3.115795" id="svg_98" cy="324.477484" cx="297.304839" stroke-opacity="null" stroke-width="0" fill="#007fff"/>
    <ellipse stroke="#000" style="vector-effect: non-scaling-stroke;" ry="2.173811" rx="3.767938" id="svg_96" cy="325.202088" cx="296.652693" stroke-opacity="null" stroke-width="0" fill="#007fff"/>
    <path stroke="#000" id="svg_69" d="m281.434033,328.093029c9.473684,-6.315789 16.842105,0 16.842105,0" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/>
    <ellipse stroke="#000" ry="8.947368" rx="37.63158" id="svg_59" cy="328.421056" cx="335.789469" stroke-opacity="null" stroke-width="1.5" fill="#ffffff"/>
    <line stroke="#000" style="vector-effect: non-scaling-stroke;" stroke-linecap="null" stroke-linejoin="null" id="svg_100" y2="229.628863" x2="221.777045" y1="238.221427" x1="221.925192" stroke-opacity="null" fill="none"/>
    <line stroke="#000" style="vector-effect: non-scaling-stroke;" stroke-linecap="null" stroke-linejoin="null" id="svg_99" y2="228.888124" x2="353.776602" y1="237.480688" x1="353.92475" stroke-opacity="null" fill="none"/>
    <rect stroke="#007fff" style="vector-effect: non-scaling-stroke;" id="svg_102" height="8.686868" width="20" y="215.757575" x= 
 

            
  

           

              
              

            

            
相關推薦

			   
            
            
            
 

    


    
    
SVG（可縮放向量圖形）繪製工具Method Draw

     
 
							
							
							給大家介紹一個製作svg的工具 
當我們在網頁上要繪製一個非常複雜的svg圖片的時候 
可以藉助於Method Draw工具進行繪製 
繪製完畢後可以匯出為程式碼拷貝到我們的專案當中 
不需要下載，這是一個網頁工具 
工具地址：傳送門 
雖然這個網頁bug很多  



  
 

    


    
    
Andrid5.0新特性——SVG（可縮放向量圖）

     
 
							
							
							

SVG一種用於描述影象的標記語言。類似HTML。

SVG嚴格遵從XML語法，並用文字格式的描述性語言來描述影象內容，因此是一種和影象解析度無關的向量圖形格式。



標準制定開發歷史


2001年9月4日，釋出SVG 1.0。
2003年1月4日，釋出S 



  
 

    


    
    
svg：xml標記的可縮放向量圖形

     
 
                    
				
				2013-07-17 
				
				abloz.com

2013.7.17

SVG是scalable vectory graphic. html5可以用此畫圖。

複製下述指令碼，存為html檔案，用chrome開啟，可以看到用xml標記 



  
 

    


    
    
[HTML5-SVG]Html5的可縮放向量圖形例項SVG

     
 
                
可縮放向量圖形（Scalable Vector Graphics，SVG）是基於可擴充套件標記語言（XML），用於描述二維向量圖形的一種圖形格式。SVG由W3C制定，是一個開放標準。
SVG嚴格遵從XML語法，並用文字格式的描述性語言來描述影象內容，因此是一種和影象解析度無 



  
 

    


    
    
利用canvas製作圖片（可縮放和平移）+相框+文字

     
 
前言：

　　公司一個售前問我能不能用H5做一個手機拍照，給相片新增相框和新增文字上傳到伺服器的功能，我當時一琢磨覺得可行，就利用空餘時間做了一個demo，去掉了拍照和上傳，如果以後有機會，會給補上，當然對於開發過webApp的朋友來做到這個很簡單。下面來看程式碼
1，思路

　首先我們需要準備 



  
 

    


    
    
可縮放性ImageView（可以放大縮小）

     
  
 
  由於專案需求的原因，最近一直在研究可縮放性ImageView，用本文來記錄一下最近所學： 
  該ImageView的實現功能有： 
  1）初步開啟時，圖片按比例滿屏（填充ImageView）顯示。 
  2）在放大縮小過程中，可以控制最大放大比例和最小縮小比例。 
  3）在縮放過程中，若圖片 



  
 

    


    
    
【筆記】浮動屬性float的應用07——浮動可縮放的首字下沉（所有步驟組合在一起）

     
  
 
 第1步 - 從一段文字開始 
 在本練習中，我們希望強制將一個下降帽放在一段文字旁邊。我們還希望丟棄上限是可擴充套件的，無論使用者的預設字型大小如何 - 這意味著所有測量都將以ems或百分比表示。從一段簡單的文字開始。 
 第2步 - 在第一個字母周圍新增一個範圍 
 將規則應用於第一個字母有兩種方 



  
 

    


    
    
canvas之圖形的變化（儲存，平移，縮放，旋轉）

     
 
                

1、儲存與恢復canvas狀態

ctx.save();暫時將當前的狀態儲存到堆中

ctx.restore();該方法用於將上一個儲存的狀態從堆中再次取出，恢復該狀態的所有設定。
<meta charset="utf-8">
<title>< 



  
 

    


    
    
Glide網路圖片滑動檢視，可縮放（PhotoView example）

     
 
                
需求是，介面中拿到的圖片地址List進行滑動檢視，並且可對圖進行縮放檢視，單張圖片載入使用Glide
實現：
使用 ViewPager滑動載入Fragment，Fragment佈局是一個PhotoView（extends ImageView）進行圖片載入和載入後的縮放
首先 



  
 

    


    
    
Visio繪圖轉.eps向量圖（轉換後絕對是向量圖，縮放無失真）原創

     
 
                
最近投論文，編輯要求上傳高清的可編輯eps格式的向量圖，但是，看網上很多都是用visio列印成pdf格式然後再轉換。其實visio列印成pdf後，如果圖形有填充的話，列印成pdf之後，填充圖形會有失真的，結果專程eps更會有失真。
如下面的圖1Viso填充圖，用visio列 



  
 

    


    
    
Android拖動，縮放，自定義內容，控制元件製作（可拖動縮放RelativeLayout定製）

     
 
                
先上效果圖：


一.     製作此控制元件的起源
專案需要一個可以拖動的控制元件，在網上可以找到很多例子，有圖片拖動控制元件，有textview拖動控制元件。但是專案中需要控制元件同時可以動態通過手指調整尺寸，並且控制元件的內容不固定，需要自定義內容，即可以新增任意內容 



  
 

    


    
    
WPF 仿QQ無邊框窗體（自動隱藏/可縮放/最大化不覆蓋工作列）

     
 
                
今天做一個綜合案例，WPF的仿QQ窗體，貼邊自動隱藏，無邊框窗體，可拖拽實現縮放，最大化不覆蓋工作列。
無邊框窗體縮放，上一篇文章已經介紹了，不過今天使用的方法更簡單，不會佔用檢視的資源，純程式碼完成。
使用事件：
OnMouseLeftButtonDown()，OnMou 



  
 

    


    
    
如何將JPEG縮略圖放到LISTVIEW中（delphi listview自繪圖形）

     
 ive   技術   繪圖   oci   archive   src   縮略圖   自繪   nbsp   

 
http://www.docin.com/p-567657457.html?qq-pf-to=pcqq.c2c
 
http://www.cnblogs.com/snow001x/ 



  
 

    


    
    
圖片點擊放大，再次點擊回到原來狀態（圖片縮放）

     
 點擊事件   nbsp   尺寸   狀態   調用   ges   cnblogs   view   tps   1.生成一個類，繼承自UIView（ScalePictures），在這個類的.h中聲明一個類方法：
+(void)scanBigImageView:(UIImageView *)currentI 



  
 

    


    
    
影象處理之影象基本變化（平移、縮放、旋轉）（Octave實現）

     
  
 
  
  
 在模式識別及計算機視覺中，要經常進行影象的變化。 
 例如：在識別手寫數字中，我們可能在廣泛應用中要求所有的圖片都是20*20這麼好的規格。所以，我們就需要進行縮放來達到目的。 
 今天來總結下學到的影象的基本變換。 
 首先我們計
   
    (w,v)
   (w,v)為源影象的 



  
 

    


    
    
用d3.js對訊號處理的結果資料作圖，得到可縮放互動的動態SVG圖

     
  
  
  
 d3.js 有何用 
 D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s 



  
 

    


    
    
吳恩達機器學習（二）多元線性迴歸（假設、代價、梯度、特徵縮放、多項式）

     
 
								
								            
						
                目錄

0. 前言












學習完吳恩達老師機器學習課程的多變數線性迴歸，簡單的做個筆記。文中部分描述屬於個人消化後的理解，僅供參考。


0. 前言

多元線性迴歸（Multivari 



  
 

    


    
    
Android之ScaleGestureDetector（縮放手勢檢測）

     
 

  1 package com.nan.scale;
  2 
  3 import android.app.Activity;
  4 import android.graphics.Bitmap;
  5 import android.graphics.BitmapFactory;
  6 impor 



  
 

    


    
    
使用rem實現全螢幕自動適配（等比例縮放佈局樣式）

     
 
                

  rem這是個低調的css單位，近一兩年開始嶄露頭角，有許多同學對rem的評價不一，有的在嘗試使用，有的在使用過程中遇到坑就棄用了。但是我對rem綜合評價是用來做web app它絕對是最合適的人選之一。

rem是什麼？

    rem（font size of th 



  
 

    


    
    
C# 影象處理(一)（影象縮放、螢幕擷取、影象合併、儲存影象）

     
  
 
 轉自https://www.cnblogs.com/MRRAOBX/articles/6184646.html

Image screen = getScreen();                       // 擷取螢幕  
saveImage(screen, screen.Size, @"