整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
html5 SVG動(dòng)畫&路徑
SVG動(dòng)畫可以使用<animate>元素創(chuàng)建
實(shí)例:
創(chuàng)建一個(gè)矩形,將在3秒內(nèi)更改其位置,然后重復(fù)動(dòng)畫兩次
<svg width="1000" height="250">
<rect width="150" height="150" fill="orange">
<animate attributeName="x" from="0" to="300" dur="3s" fill="freeze" repeatCount="2" />
</rect>
</svg>
attributeName:指定哪個(gè)屬性需要產(chǎn)生動(dòng)畫效果
from:指定屬性的起始值
to:指定屬性的結(jié)束值
dur:指定動(dòng)畫運(yùn)行的時(shí)間(持續(xù)時(shí)間)
fill="frezee|remove":指定動(dòng)畫播放完畢后是停留在播放的終點(diǎn)還是回到起始位置
repeatCount:指定動(dòng)畫的重復(fù)播放次數(shù)
在上面的例子中,矩形在3s內(nèi)將其x屬性從0更改為300
●要無限重復(fù)動(dòng)畫,請(qǐng)使用值"indefinite"作為repeatCount屬性
<path>元素用于定義一個(gè)路徑
下面的命令可用于路徑數(shù)據(jù):
●M=moveto
●L=lineto
●H=horizontal lineto
●V=vertical lineto
●C=curveto
●S=smooth curveto
●Q=quadratic Bezier curve
●T=smooth quadratic Bezier curveto
●A=elliptical Arc
●Z=closepath
注意:以上所有命令均允許小寫字母.大寫字母表示絕對(duì)定位,小寫字母表示相對(duì)定位
實(shí)例:
<svg width="500" height="500">
<path d="M50 0 L75 200 L225 200 Z"/>
</svg>
上面的例子中定義了一條路徑,它開始于150 0,到達(dá)位置75 200,然后從那里開始到225 200,最后150 0關(guān)閉路徑
二 html5 Canvas
html5<canvas>元素用于圖形的繪制,通過腳本(通常是JavaScript)來完成
<canvas>標(biāo)簽只是圖形容器,你必須使用腳本來繪制圖形
getContext()方法可返回一個(gè)對(duì)象,該方法提供了用于在畫布上繪畫的方法和屬性.
你可以通過多種方法使用canvas繪制路徑,盒,圓,字符以及添加圖像
<canvas>元素定義如下:
<canvas id"myCanvas" width="200" height="100">
</canvas>
<canvas>標(biāo)簽通常需要指定一個(gè)id屬性(腳本中經(jīng)常使用),width和height屬性定義的畫布的大小
了解和使用Canvas需要基本了解JavaScript的基本知識(shí)
canvas是一個(gè)二維坐標(biāo)
canvas的左上角坐標(biāo)為(0,0)
x坐標(biāo)向右增加
y坐標(biāo)向著畫布底部增加
Canvas-路徑
在Canvas上畫線,我們將使用以下兩種方法:
●moveTo(x,y)定義線條開始坐標(biāo)
●lineTo(x,y)定義線條結(jié)束坐標(biāo)
在canvas中繪制圓形,我們將使用以下方法:
●arc(x,y,start,stop)
Canvas-文本
使用canvas繪制文本,重要的屬性和方法如下:
●font-定義字體
●fillText(text,x,y)-在canvas上繪制實(shí)心的文本
●strokeText(text,x,y)-在canvas上繪制空心的文本
Canvas-漸變
漸變可以填充在矩形,圓形,線條,文本等等,各種形狀可以自己定義不同的顏色
以下有兩種不同的方式來設(shè)置canvas漸變:
●creatLinearGradient(x,y,x1,y1)-創(chuàng)建線條漸變
●creatRadialGradient(x,y,r,x1,y1,r1)-創(chuàng)建一個(gè)徑向/圓漸變
當(dāng)我們使用漸變對(duì)象,必須使用兩種或兩種以上的停止顏色
addColorStop()方法指定顏色停止,參數(shù)使用坐標(biāo)描述,可以是0至1
使用漸變,設(shè)置fillStyle或strokeStyle的值為漸變,然后繪制形狀,如矩形,文本,或一條線
Canva-圖像
把一幅圖像放置在畫布上,使用以下方法:
●drawImage(image,x,y)
三 html5 SVG與Canvas的區(qū)別
SVG:
SVG是一種使用XML描述2D圖形的語言
SVG基于XML,這意味著SVG DOM中的每個(gè)元素都是可用的.你可以為某個(gè)元素附加JavaScript事件處理器
在SVG中,每個(gè)被繪制的圖形均被視為對(duì)象.如果SVG對(duì)象的屬性發(fā)生改變,那么瀏覽器能夠自動(dòng)重現(xiàn)圖形
特點(diǎn):
●不依賴分辨率
●支持事件處理器
●最適合帶有大型渲染區(qū)域的應(yīng)用程序(比如谷歌地圖)
●復(fù)雜程度高會(huì)減慢渲染速度(任何過度使用DOM的應(yīng)用都不快)
●不適合游戲應(yīng)用
Canvas:
canvas通過JavaScript來繪制2D圖形
canvas可以逐像素進(jìn)行渲染的
在canvas中,一旦圖形被繪制出來,它就不會(huì)繼續(xù)得到瀏覽器的關(guān)注
如果其位置發(fā)生變化,那么整個(gè)場(chǎng)景也需要重新啟動(dòng),包括任何或許已被圖像覆蓋的對(duì)象
特點(diǎn):
●依賴分辨率
●不支持事件處理器
●弱的文本渲染能力
●能夠以.png或.ipg格式保存結(jié)果圖像
●最適合圖像密集型的游戲,其中的許多對(duì)象都會(huì)被頻換重繪
85條高級(jí)AutoCAD工程師繪圖技巧 1.如何替換找不到的原文字體？
2.如何刪除頑固圖層？
5.在 Word文檔中插入 AutoCAD圖形的發(fā)法。
7.將AutoCAD中的圖形插入WORD時(shí)線寬問題。 11.在多行文字（ mtext）命令中使用 Word97編輯文本。 鍵入REINIT命令，鉤選PGP，再確定 14.從備份文件中恢復(fù)圖形
去掉文件和文件夾的隱藏性。 刪除 C:\Documents and Settings\All Users\Application Data\Autodesk\Software Licenses\B2260000.dat 16.acad.pgp文件的修改
點(diǎn)工具——選項(xiàng)——配置——重置；也可用命令MENULOAD，然后點(diǎn)擊瀏覽，選擇ACAD.MNC加載即可。 18.如何關(guān)閉CAD中的*BAK文件？
（2）也可以用命令I(lǐng)SAVEBAK,將ISAVEBAK的系統(tǒng)變量修改為0，系統(tǒng)變量為1時(shí)，每次保存都會(huì)創(chuàng)建“*BAK”備份文件。
按F6鍵切換。或者將COORDS的系統(tǒng)變量修改為1或者2。系統(tǒng)變量為0時(shí)，是指用定點(diǎn)設(shè)備指定點(diǎn)時(shí)更新坐標(biāo)顯示。系統(tǒng)變量為1時(shí)，是指不斷更新坐標(biāo)顯示。系統(tǒng)變量為2時(shí)，是指不斷更新坐標(biāo)顯示，當(dāng)需要距離和角度時(shí)，顯示到上一點(diǎn)的距離和角度。 20.繪圖時(shí)沒有虛線框顯示怎么辦？ 修改系統(tǒng)變量DRAGMODE，推薦修改為AUTO。系統(tǒng)變量為ON時(shí)，再選定要拖動(dòng)的對(duì)象后，僅當(dāng)在命令行中輸入DRAG后才在拖動(dòng)時(shí)顯示對(duì)象的輪廓；系統(tǒng)變量為OFF時(shí)，在拖動(dòng)時(shí)不顯示對(duì)象的輪廓；系統(tǒng)變量位AUTO時(shí)，在拖動(dòng)時(shí)總是顯示對(duì)象的輪廓。 21.選取對(duì)象時(shí)拖動(dòng)鼠標(biāo)產(chǎn)生的虛框變?yōu)閷?shí)框且選取后留下兩個(gè)交叉的點(diǎn)怎么辦？ 將BLIPMODE的系統(tǒng)變量修改為OFF即可。 22.命令中的對(duì)話框變?yōu)槊钐崾拘性趺崔k？ 將CMDDIA的系統(tǒng)變量修改為1。系統(tǒng)變量為0時(shí)，為命令行；系統(tǒng)變量為1時(shí)，為對(duì)話框。 23.如何給AutoCAD工具條添加命令及相應(yīng)圖標(biāo)？
用BLIPMODE命令，在提示行下輸入OFF可消除它。 26.怎樣控制命令行回顯是否產(chǎn)生？ 將CMDECHO系統(tǒng)變量改為0或1。 27.快速查出系統(tǒng)變量的方法？ 要記住多達(dá)兩三百個(gè)變量有一定難度，可以用以下方法查出是哪個(gè)變量出了差錯(cuò)。為敘述方便，將有問題的文件命名為文件1，新建一個(gè)文件命名為文件2（昀好新建，因?yàn)槟菢铀凶兞慷际悄J(rèn)值，也可以用沒問題的文件），分別在兩文件中運(yùn)行SETVAR，然后選？列出變量，將變量拷到Excel，比較變量中哪些不一樣，這樣可以大大減少查詢變量的時(shí)間。舉例：假設(shè)一個(gè)圖其中變量ANGBASE設(shè)為90，那若用程序生成文本的話，所有文本中的字都會(huì)旋轉(zhuǎn)90。現(xiàn)用setvar命令將變量列出，然后將所有變量復(fù)制－粘貼到一個(gè)Excel文件B列。新建一個(gè)文件，再用setvar命令將變量列出，將所有變量復(fù)制－粘貼到Excel文件A列，在Excel文件文件C1格輸入“＝IF(A1=B1,0,1)”下拉單元格算出所有行的值，然后對(duì)C列按遞減排列，這樣，值不相同的變量就集中在前幾列，再分析這些變量，很快就能查出是ANGBASE變量的設(shè)置有問題 28.塊文件不能炸開及不能用另外一些常用命令的問題。
在AutoCAD中同時(shí)保存中英文兩套菜單系統(tǒng)，來回切換是可行的。具體作法是把漢化菜單文件改名為Pacad.mnu，放在AutoCAD安裝目錄下的\SUPPORT子目錄中，當(dāng)然還別忘了將acad.mnl復(fù)制成Pacad.mnl，放?*** acad.mnu同一目錄中。在用中文菜單時(shí)，用menu命令加載Pacad；換回英文菜單時(shí)就再次使用menu命令加載acad菜單文件。 30.如何為autocad2004圖形設(shè)置密碼？ 工具—選項(xiàng)—打開和保存按紐—安全選項(xiàng)，設(shè)置密碼即可，如果取消密碼在此把密碼刪掉即可。 31.標(biāo)注時(shí)使標(biāo)注離圖有一定的距離 執(zhí)行DIMEXO命令，再輸入數(shù)字調(diào)整距離。 32.如何將圖中所有的STANDADN樣式的標(biāo)注文字改為SIMPLEX樣式？ 可在ACAD.LSP中加一句：(vl-cmdf ".style" "standadn" "simplex.shx")。 33.重合的線條怎樣突出顯示？ 可以使用工具——顯示順序功能。 34.如何快速變換圖層？ 點(diǎn)取想要變換到的圖層中的任一元素，然后點(diǎn)擊圖層工具欄的-將對(duì)象的圖層置為當(dāng)前-即可。 35.在標(biāo)注文字時(shí)，標(biāo)注上下標(biāo)的方法： 使用多行文字編輯命令： 上標(biāo)：輸入2^，然后選中2^，點(diǎn)a/b鍵即可。 打開多行文字編輯器-在輸入文字的矩形框里點(diǎn)右鍵-選符號(hào)-其它打開字符映射表-選擇符號(hào)即可。注意字符映射表的內(nèi)容取決于用戶在“字體”下拉列表中選擇的字體。 37.如何用break命令在一點(diǎn)打斷對(duì)象？ 執(zhí)行break命令，在提示輸入第二點(diǎn)時(shí)，可以輸入@再回車，這樣即可在第一點(diǎn)打斷選定對(duì)象。 38.使用編輯命令時(shí)多選了某個(gè)圖元如何去掉？ 在命令未結(jié)束下按住shift鍵選擇多選的圖元即可，很方便的喔。 39.“！”鍵的使用。 假設(shè)屏幕上有一條已知長(zhǎng)度的線（指單線、多義線，未知長(zhǎng)度當(dāng)然也可以），且與水平方向有一定的角度，要求將它縮短一定的長(zhǎng)度且方向不變，操作過程如下：直接選取該線，使其夾點(diǎn)出現(xiàn)，將光標(biāo)移動(dòng)到要縮短的一端并激活該夾點(diǎn)，使這條線變?yōu)榭衫斓钠そ罹€，將光標(biāo)按該線的方向移動(dòng)，使皮筋線和原線段重合，移動(dòng)的距離沒有限制，有人覺得移動(dòng)的方向不能和原來一樣那么就用輔助點(diǎn)捕捉命令，輸入“捕捉到昀近點(diǎn)（即near命令）”，然后在 “near 到（即near to）”的提示后輸入“!XX”(XX為具體數(shù)值)后回車，該線的長(zhǎng)度就改變了。很放便的呦！！！ 40.圖形的打印技巧。
41.質(zhì)量屬性查詢。 AutoCAD提供點(diǎn)坐標(biāo)（ID），距離（Distance），面積（area）的查詢，給圖形的分析帶來了很大的方便，但是在實(shí)際工作中，有時(shí)還須查詢實(shí)體質(zhì)量屬性特性，AutoCAD提供實(shí)體質(zhì)量屬性查詢（Mass Properties），可以方便查詢實(shí)體的慣性矩、面積矩、實(shí)體的質(zhì)心等，須注意的是，對(duì)于曲線、多義線構(gòu)造的閉合區(qū)域，應(yīng)先用region命令將閉合區(qū)域面域化，再執(zhí)行質(zhì)量屬性查詢，才可查詢實(shí)體的慣性矩、面積矩、實(shí)體的質(zhì)心等屬性 42.如何計(jì)算二維圖形的面積？ 1.對(duì)于簡(jiǎn)單圖形，如矩形、三角形。只須執(zhí)行命令A(yù)REA（可以是命令行輸入或點(diǎn)擊對(duì)應(yīng)命令圖標(biāo)），在命令提示“Specify first corner point or [Object/Add/Subtract]:”后，打開捕捉依次選取矩形或三角形各交點(diǎn)后回車，AutoCAD將自動(dòng)計(jì)算面積（Area）、周長(zhǎng)（Perimeter），并將結(jié)果列于命令行。 2.對(duì)于簡(jiǎn)單圖形，如圓或其它多段線（Polyline）、樣條線（Spline）組成的二維封閉圖形。執(zhí)行命令A(yù)REA，在命令提示“Specify first corner point or [Object/Add/Subtract]:”后，選擇Object選項(xiàng)，根據(jù)提示選擇要計(jì)算的圖形，AutoCAD將自動(dòng)計(jì)算面積、周長(zhǎng)。 3.對(duì)于由簡(jiǎn)單直線、圓弧組成的復(fù)雜封閉圖形，不能直接執(zhí)行AREA命令計(jì)算圖形面積。必須先使用region命令把要計(jì)算面積的圖形創(chuàng)建為面域，然后再執(zhí)行命令A(yù)REA，在命令提示“Specify first corner point or [Object/Add/Subtract]:”后，選擇Object選項(xiàng)，根據(jù)提示選擇剛剛建立的面域圖形，AutoCAD將自動(dòng)計(jì)算面積、周長(zhǎng)。 43.如何設(shè)置線寬？
LineWeight線寬是絕對(duì)線寬，而多義線線寬是相對(duì)線寬，也就是說，無論圖形以多大尺寸打印LineWeight線寬都不變，而多義線線寬則隨打印尺寸比例大小變化而變化，無論實(shí)體被縮放多少倍，LineWeight線寬都不變，而多義線線寬則隨縮放比例改變而改變。 45.[TAB]鍵在AutoCAD捕捉功能中的巧妙利用。 當(dāng)需要捕捉一個(gè)物體上的點(diǎn)時(shí)，只要將鼠標(biāo)靠近某個(gè)或某物體，不斷的按TAb鍵，這個(gè)或這些物體的某些特殊點(diǎn)（如直線的端點(diǎn)、中間點(diǎn)、垂直點(diǎn)、與物體的交點(diǎn)、圓的四分圓點(diǎn)、中心點(diǎn)、切點(diǎn)、垂直點(diǎn)、交點(diǎn)）就回輪換顯示出來，選擇需要的點(diǎn)左鍵單擊即可以捕中這些點(diǎn)。注意當(dāng)鼠標(biāo)靠近兩個(gè)物體的交點(diǎn)附近時(shí)這兩個(gè)物體的特殊點(diǎn)將先后輪換顯示出來（其所屬物體會(huì)變?yōu)樘摼€），這對(duì)于在圖形局部較為復(fù)雜時(shí)捕捉點(diǎn)很有用。 46.橢圓命令生成的橢圓是多義線還是實(shí)體？ 由系統(tǒng)變量 PELLIPSE決定，當(dāng)其為1時(shí)，生成的橢圓是多義線。 47.一些常用快捷鍵。
---- 在繪制圖樣時(shí)，經(jīng)常遇到畫截交線、相貫線及其他曲線的問題。手工繪制很麻煩，要找特殊點(diǎn)和一定數(shù)量一般點(diǎn)，且連出的曲線誤差大。用AutoCAD 2000繪制平面曲線或空間曲線卻很容易。 ---- 方法一：用Pline命令畫2D圖形上通過特殊點(diǎn)的折線，經(jīng)Pedit命令中Fit或Spline曲線擬合，可變成光滑的平面曲線。用3Dpoly命令畫3D圖形上通過特殊點(diǎn)的折線，經(jīng)Pedit命令中Spline曲線擬合，可變成光滑的空間曲線。 ---- 方法二：用Solids命令創(chuàng)建三維基本實(shí)體（長(zhǎng)方體、圓柱、圓錐、球等），再經(jīng)Boolean（布爾）組合運(yùn)算：交、并、差和干涉等獲得各種復(fù)雜實(shí)體，然后利用下拉菜單View（視圖）/3D Viewpoint（三維視點(diǎn)），選擇不同視點(diǎn)來產(chǎn)生標(biāo)準(zhǔn)視圖，得到曲線的不同視圖投影。 50.在AutoCAD中采用什么比例繪圖好？
51.如何在AutoCAD中用自定義圖案來進(jìn)行填充？ 例如：直線AB與四條平行線相交，現(xiàn)在要剪切掉直線AB右側(cè)的部分，執(zhí)行trim命令，在提示行顯示選擇對(duì)象時(shí)選擇AB并回車，然后輸入F并回車，然后在AB右側(cè)畫一條直線并回車，OK了。 53.怎樣擴(kuò)大繪圖空間？
word里有對(duì)象插入，其中一個(gè)就是AutoCAD 圖形，插入前別忘了在AutoCAD里把圖形的背景顏色改為白色（工具-選項(xiàng)-顯示-顏色里面改），否則打出來圖形有填充色，看不見圖形。 55.命令前加“-”與不加“-”的區(qū)別 加“-”與不加“-”在AUTOCAD中的意義是不一樣的，加“-”是AUTOCAD2000以后為了使各種語言版本的指令有統(tǒng)一的寫法而制定的相容指令。命令前加“-”是該命令的命令行模式，不加就是對(duì)話框模式，具體一點(diǎn)說：前面加“-”后，命令運(yùn)行時(shí)不出現(xiàn)對(duì)話框模式，所有的命令都是在命令行中輸入的，不加“-”命令運(yùn)行時(shí)會(huì)出現(xiàn)對(duì)話框，參數(shù)的輸入在對(duì)話框中進(jìn)行。 56.怎樣對(duì)兩個(gè)圖進(jìn)行對(duì)比檢查？ 可以把其中一個(gè)圖做成塊，并把顏色改為一種鮮艷顏色，如黃色，然后把兩個(gè)圖重迭起來，若有不一致的地方就很容易看出來。 57.多段線的寬度問題。 當(dāng)pline線設(shè)置成寬度不為0時(shí)，打印時(shí)就按這個(gè)線寬打印。如果這個(gè)多段線的寬度太小，就出不了寬度效果。（如以毫米為單位繪圖，設(shè)置多段線寬度為10，當(dāng)你用1：100的比例打印時(shí)，就是0.1毫米。）所以多段線的寬度設(shè)置要考慮打印比例才行。而寬度是0時(shí)，就可按對(duì)象特性來設(shè)置（與其他對(duì)象一樣）。 58.在模型空間里畫的是虛線，打印出來也是虛線，可是怎么到了布局里打印出來就變成實(shí)線了呢？在布局里怎么打印虛線？ 估計(jì)是改變了線形比例，同時(shí)是采用的“比例到圖紙空間”的方法（這是 CAD的默認(rèn)方法）。在線形設(shè)置對(duì)話框中把“比例到圖紙空間”前的鉤去掉。 59．怎樣把多條直線合并為一條？ 用 Group命令可以完成。 60.怎樣把多條線合并為多段線？ 用 PEDIT命令，此命令中有合并選項(xiàng)。 61.當(dāng)AUTOCAD發(fā)生錯(cuò)誤強(qiáng)行關(guān)閉后重新啟動(dòng)AUTOCAD時(shí)，出現(xiàn)以下現(xiàn)象：文件 ——打開命令無法彈出窗口讓選擇文件了，輸出文件時(shí)也類似時(shí)怎么辦？ 應(yīng)該修改FILEDIA變量。 62.如何在修改完ACAD.LSP后自動(dòng)加載？ 可以將ACADLSPASDOC的系統(tǒng)變量修改為1。 63.如何修改尺寸標(biāo)注的比例？
1.Ctrl+鼠標(biāo)中鍵可以實(shí)現(xiàn)類似其他軟件的游動(dòng)漫游。 2.雙擊鼠標(biāo)中鍵相當(dāng)于ZOOM E。 66.多重復(fù)制總是需要輸入M，如何簡(jiǎn)化？
AUTOCAD會(huì)沿逆時(shí)針方向?qū)A上從第一斷點(diǎn)到第二斷點(diǎn)之間的那段圓弧刪除。 68.如何快速為平行直線作相切半圓？ 用圓角 FILLET 命令，比先畫相切圓然后再剪切的作法快10倍。 69.如何快速輸入距離？ 在定位點(diǎn)的提示下，輸入數(shù)字值，將下一個(gè)點(diǎn)沿光標(biāo)所指方向定位到指定的距離，此功能通常在 “正交”或“捕捉”模式打開的狀態(tài)下使用。例如：執(zhí)行命令:line；指定第一點(diǎn): 指定點(diǎn) ；指定下一點(diǎn): 將光標(biāo)移到需要的方向并輸入 5，回車即可。 70.如何使變得粗糙的圖形恢復(fù)平滑？ 有時(shí)候圖形經(jīng)過縮放或zoom后，圖形會(huì)變得粗糙，如圓變成了多邊形，可以用重生成命令（regen）來恢復(fù)平滑狀態(tài)。 71.怎樣測(cè)量某個(gè)圖元的長(zhǎng)度？
工具——選項(xiàng)——顯示——十字光標(biāo)大小，調(diào)整就可以了。 73.如何改變拾取框的大小？ 工具——選項(xiàng)——選擇——拾取框大小，調(diào)整就可以了。 74.如何改變自動(dòng)捕捉標(biāo)記的大小？ 工具——選項(xiàng)——草圖——自動(dòng)捕捉標(biāo)記大小，調(diào)整就可以了。 75.復(fù)制圖形粘貼后總是離的很遠(yuǎn)怎么辦？ 復(fù)制時(shí)使用帶基點(diǎn)復(fù)制：點(diǎn)編輯——帶基點(diǎn)復(fù)制。 76.如何測(cè)量帶弧線的多線段長(zhǎng)度？ 用列表命令（list）！ 77.為什么堆疊按鈕不可用？ 堆疊的使用：一是要有堆疊符號(hào)（#、^、/）；二是要把堆疊的內(nèi)容選中后才可以操作。 78.面域、塊、實(shí)體是什么概念? 面域是用閉合的外形或環(huán)創(chuàng)建的二維區(qū)域；塊是可組合起來形成單個(gè)對(duì)象(或稱為塊定義)的對(duì)象集合(一張圖在另一張圖中一般可作為塊)；實(shí)體有兩個(gè)概念,其一是構(gòu)成圖形的有形的基本元素,其二是指三維物體.對(duì)于三維實(shí)體,可以使用"布爾運(yùn)算"使之聯(lián)合,對(duì)于廣義的實(shí)體,可以使用"塊"或"組(group)"進(jìn)行"聯(lián)合"。 79.什么是DXF文件格式？
只有圖線和尺寸線，而沒有尺寸數(shù)值的現(xiàn)成的圖紙。這是以前生產(chǎn)中的偷懶做法，現(xiàn)在用計(jì)算機(jī)制圖應(yīng)該不提倡這樣做。 81.底版本的AutoCAD怎樣打開高版本的圖？ 轉(zhuǎn)換一下，可以用轉(zhuǎn)換軟件；或叫發(fā)給你的人存為低版本的格式再打開。 82.解決安裝cad2002后控制面板中有大塊白的現(xiàn)象。 方法如下：打開[開始]-----在[運(yùn)行]框里輸入regedit，打開注冊(cè)表編輯器，找到下面項(xiàng) HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Uninstall\{5783F2D7-0101-0804-0002-0060B0CE6BBA}，修改DisplayIcon，把“AutoCAD 2002安裝目錄\acad.exe,-1”中的-1，改為1。即可解決控制面板中刪除里面有一大塊白的現(xiàn)象。 83.如何使圖形只能看而不能修改？ 要是自己的圖把它全部圖層鎖定就行了，打開不會(huì)變的；如果以后不想用了，就把里面所有東西都炸碎也可以；還有一種方法是用lisp語言寫個(gè)加密程序，一旦運(yùn)行后，圖就只能看，怎么也改不了了。 84.如何修改尺寸標(biāo)注的關(guān)聯(lián)性?
文字屬性: 改為: 也可以在CAD2004特性里改:對(duì)正和方向. |
家好，我是Echa。
創(chuàng)作不易，喜歡的老鐵們加個(gè)關(guān)注，點(diǎn)個(gè)贊，后面會(huì)持續(xù)更新干貨，速速收藏，謝謝！
在現(xiàn)在的時(shí)代發(fā)展中，從以前的手寫簽名，逐漸衍生出了電子簽名。電子簽名和紙質(zhì)手寫簽名一樣具有法律效應(yīng)。電子簽名目前主要還是在需要個(gè)人確認(rèn)的產(chǎn)品環(huán)節(jié)和司法類相關(guān)的產(chǎn)品上較多。
舉個(gè)常用的例子，大家都用過釘釘，釘釘上面就有電子簽名，相信大家這肯定是知道的。
那作為前端的我們?nèi)绾螌?shí)現(xiàn)電子簽名呢？其實(shí)在html5中已經(jīng)出現(xiàn)了一個(gè)重要級(jí)別的輔助標(biāo)簽，是啥呢？那就是canvas。下面我給大家分享分享幾個(gè)關(guān)于前端如何實(shí)現(xiàn)電子簽名經(jīng)典案例以及實(shí)現(xiàn)方法。
Canvas（畫布）是在HTML5中新增的標(biāo)簽用于在網(wǎng)頁實(shí)時(shí)生成圖像，并且可以操作圖像內(nèi)容，基本上它是一個(gè)可以用JavaScript操作的位圖（bitmap）。Canvas 對(duì)象表示一個(gè) HTML 畫布元素 -。它沒有自己的行為，但是定義了一個(gè) API 支持腳本化客戶端繪圖操作。
大白話就是canvas是一個(gè)可以在上面通過javaScript畫圖的標(biāo)簽，通過其提供的context(上下文)及Api進(jìn)行繪制，在這個(gè)過程中canvas充當(dāng)畫布的角色。
知道幾何的朋友都很清楚，線由點(diǎn)繪成，面由線繪成。
多點(diǎn)成線，多線成面。
所以我們實(shí)際只需要拿到當(dāng)前觸摸的坐標(biāo)點(diǎn)，進(jìn)行成線處理就可以了。
在線預(yù)覽：https://langyuxiansheng.github.io/vue-sign-canvas/
Github：https://github.com/langyuxiansheng/vue-sign-canvas
vue-sign-canvas 一個(gè)基于canvas開發(fā),封裝于Vue組件的通用手寫簽名板(電子簽名板),支持pc端和移動(dòng)端,屬性支持自定義配置
組件模板使用
<template>
<div id="app">
<h2 class="title">Vue Sign Canvas 電子簽名板</h2>
<sign-canvas class="sign-canvas" ref="SignCanvas" :options="options" v-model="value" />
<img v-if="value" class="view-image" :src="value" width="150" height="150" />
<div class="config">
<ul class="ul-config">
<li class="li-c">
<span class="item-label">書寫速度:</span>
<span class="item-content">
<select name="isSign" v-model="options.isSign">
<option :value="true">簽名</option>
<option :value="false">寫字</option>
</select>
</span>
</li>
<li class="li-c">
<span class="item-label">顯示邊框/網(wǎng)格:</span>
<span class="item-content">
<select name="isSign" v-model="options.isShowBorder">
<option :value="true">顯示</option>
<option :value="false">不顯示</option>
</select>
</span>
</li>
<li class="li-c">
<span class="item-label">兼容高倍屏高清繪制:</span>
<span class="item-content">
<select name="isSign" v-model="options.isDpr">
<option :value="true">啟用</option>
<option :value="false">關(guān)閉</option>
</select>
</span>
</li>
<li class="li-c">
<span class="item-label">邊框?qū)挾?</span>
<span class="item-content">
<input v-model="options.borderWidth" type="number" />
</span>
</li>
<li class="li-c">
<span class="item-label">下筆寬度:</span>
<span class="item-content">
<input v-model="options.writeWidth" type="number" />
</span>
</li>
<li class="li-c">
<span class="item-label">圖片類型:</span>
<span class="item-content">
<input v-model="options.imgType" type="text" />
</span>
</li>
<li class="li-c">
<span class="item-label">線條的邊緣類型:</span>
<span class="item-content">
<select name="lineCap" v-model="options.lineCap">
<option value="butt">平直的邊緣</option>
<option value="round">圓形線帽</option>
<option value="square">正方形線帽</option>
</select>
</span>
</li>
<li class="li-c">
<span class="item-label">線條交匯時(shí)邊角的類型:</span>
<span class="item-content">
<select name="lineCap" v-model="options.lineJoin">
<option value="bevel">創(chuàng)建斜角</option>
<option value="round">創(chuàng)建圓角</option>
<option value="miter">創(chuàng)建尖角</option>
</select>
</span>
</li>
<li class="li-c">
<span class="item-label">畫筆顏色:</span>
<span class="item-content">
<input type="color" v-model="options.writeColor" />
</span>
</li>
<li class="li-c">
<span class="item-label">背景色:</span>
<span class="item-content">
<input type="color" v-model="options.bgColor" />
</span>
</li>
</ul>
</div>
<div class="sign-btns">
<span id="clear" @click="canvasClear()">清空</span>
<span id="save" @click="saveAsImg()">保存</span>
<span id="save" @click="downloadSignImg()">下載</span>
</div>
</div>
</template>
<script>
import SignCanvas from "../packages";
export default {
components: { SignCanvas },
data() {
return {
value: null,
options: {
isDpr: false, //是否使用dpr兼容高倍屏 [Boolean] 可選
lastWriteSpeed: 1, //書寫速度 [Number] 可選
lastWriteWidth: 2, //下筆的寬度 [Number] 可選
lineCap: "round", //線條的邊緣類型 [butt]平直的邊緣 [round]圓形線帽 [square] 正方形線帽
lineJoin: "bevel", //線條交匯時(shí)邊角的類型 [bevel]創(chuàng)建斜角 [round]創(chuàng)建圓角 [miter]創(chuàng)建尖角。
canvasWidth: 350, //canvas寬高 [Number] 可選
canvasHeight: 370, //高度 [Number] 可選
isShowBorder: true, //是否顯示邊框 [可選]
bgColor: "#fcc", //背景色 [String] 可選
borderWidth: 1, // 網(wǎng)格線寬度 [Number] 可選
borderColor: "#ff787f", //網(wǎng)格顏色 [String] 可選
writeWidth: 5, //基礎(chǔ)軌跡寬度 [Number] 可選
maxWriteWidth: 30, // 寫字模式最大線寬 [Number] 可選
minWriteWidth: 5, // 寫字模式最小線寬 [Number] 可選
writeColor: "#101010", // 軌跡顏色 [String] 可選
isSign: true, //簽名模式 [Boolean] 默認(rèn)為非簽名模式,有線框, 當(dāng)設(shè)置為true的時(shí)候沒有任何線框
imgType: "png", //下載的圖片格式 [String] 可選為 jpeg canvas本是透明背景的
},
};
},
methods: {
/**
* 清除畫板
*/
canvasClear() {
this.$refs.SignCanvas.canvasClear();
},
/**
* 保存圖片
*/
saveAsImg() {
const img = this.$refs.SignCanvas.saveAsImg();
alert(`image 的base64：${img}`);
},
/**
* 下載圖片
*/
downloadSignImg() {
this.$refs.SignCanvas.downloadSignImg();
},
},
};
</script>
<style lang="less">
* {
margin: 0;
padding: 0;
}
.title {
padding: 20px;
text-align: center;
}
.sign-canvas {
display: block;
margin: 20px auto;
}
.view-image {
display: block;
margin: 20px auto;
}
.config {
width: 350px;
margin: 20px auto;
.ul-config {
.li-c {
display: flex;
align-items: center;
padding: 4px 10px;
.item-label {
font-size: 14px;
}
.item-content {
margin-left: 10px;
}
}
}
}
.sign-btns {
display: flex;
justify-content: space-between;
#clear,
#clear1,
#save {
display: inline-block;
padding: 5px 10px;
width: 76px;
height: 40px;
line-height: 40px;
border: 1px solid #eee;
background: #e1e1e1;
border-radius: 10px;
text-align: center;
margin: 20px auto;
cursor: pointer;
}
}
</style><div class="user-sign">
<template v-if="sign">
<img class="sign-image" :src="sign" alt="" srcset="" />
</template>
</div>
<script>
//局部注冊(cè)
import SignCanvas from "sign-canvas";
import util from "@util";
import { saveSignature } from "@/http";
export default {
name: "UserSign",
components: { SignCanvas },
data() {
return {
sign: null,
};
},
};
</script>
<style lang="scss" scoped>
.user-sign {
background: #e7e7e7;
height: 9.375rem;
position: relative;
.sign-image {
margin: 0 auto;
z-index: 9;
height: 100%;
transform: rotate(-90deg) scale(1.5);
display: block;
}
}
</style>如下圖：
在線預(yù)覽：http://szimek.github.io/signature_pad/
Github：https://github.com/szimek/signature_pad
Signature Pad是一個(gè)用于繪制平滑簽名的JavaScript庫。它基于HTML5畫布，使用基于Square發(fā)布的Smoother Signatures的可變寬度Bézier曲線插值。它適用于所有現(xiàn)代桌面和移動(dòng)瀏覽器，不依賴任何外部庫。
核心代碼：
const canvas = document.querySelector("canvas");
const signaturePad = new SignaturePad(canvas);
// Returns signature image as data URL (see https://mdn.io/todataurl for the list of possible parameters)
signaturePad.toDataURL(); // save image as PNG
signaturePad.toDataURL("image/jpeg"); // save image as JPEG
signaturePad.toDataURL("image/jpeg", 0.5); // save image as JPEG with 0.5 image quality
signaturePad.toDataURL("image/svg+xml"); // save image as SVG data url
// Return svg string without converting to base64
signaturePad.toSVG(); // "<svg...</svg>"
signaturePad.toSVG({includeBackgroundColor: true}); // add background color to svg output
// Draws signature image from data URL (mostly uses https://mdn.io/drawImage under-the-hood)
// NOTE: This method does not populate internal data structure that represents drawn signature. Thus, after using #fromDataURL, #toData won't work properly.
signaturePad.fromDataURL("data:image/png;base64,iVBORw0K...");
// Draws signature image from data URL and alters it with the given options
signaturePad.fromDataURL("data:image/png;base64,iVBORw0K...", { ratio: 1, width: 400, height: 200, xOffset: 100, yOffset: 50 });
// Returns signature image as an array of point groups
const data = signaturePad.toData();
// Draws signature image from an array of point groups
signaturePad.fromData(data);
// Draws signature image from an array of point groups, without clearing your existing image (clear defaults to true if not provided)
signaturePad.fromData(data, { clear: false });
// Clears the canvas
signaturePad.clear();
// Returns true if canvas is empty, otherwise returns false
signaturePad.isEmpty();
// Unbinds all event handlers
signaturePad.off();
// Rebinds all event handlers
signaturePad.on();如下圖：
完整版：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<canvas></canvas>
<div>
<button onclick="cancel()">取消</button>
<button onclick="save()">保存</button>
</div>
</body>
<script>
// 配置內(nèi)容
const config = {
width: 400, // 寬度
height: 200, // 高度
lineWidth: 5, // 線寬
strokeStyle: 'red', // 線條顏色
lineCap: 'round', // 設(shè)置線條兩端圓角
lineJoin: 'round', // 線條交匯處圓角
}
// 獲取canvas 實(shí)例
const canvas = document.querySelector('canvas')
// 設(shè)置寬高
canvas.width = config.width
canvas.height = config.height
// 設(shè)置一個(gè)邊框
canvas.style.border = '1px solid #000'
// 創(chuàng)建上下文
const ctx = canvas.getContext('2d')
// 設(shè)置填充背景色
ctx.fillStyle = 'transparent'
// 繪制填充矩形
ctx.fillRect(
0, // x 軸起始繪制位置
0, // y 軸起始繪制位置
config.width, // 寬度
config.height // 高度
);
// 保存上次繪制的 坐標(biāo)及偏移量
const client = {
offsetX: 0, // 偏移量
offsetY: 0,
endX: 0, // 坐標(biāo)
endY: 0
}
// 判斷是否為移動(dòng)端
const mobileStatus = (/Mobile|Android|iPhone/i.test(navigator.userAgent))
// 初始化
const init = event => {
// 獲取偏移量及坐標(biāo)
const { offsetX, offsetY, pageX, pageY } = mobileStatus ? event.changedTouches[0] : event
// 修改上次的偏移量及坐標(biāo)
client.offsetX = offsetX
client.offsetY = offsetY
client.endX = pageX
client.endY = pageY
// 清除以上一次 beginPath 之后的所有路徑，進(jìn)行繪制
ctx.beginPath()
// 根據(jù)配置文件設(shè)置相應(yīng)配置
ctx.lineWidth = config.lineWidth
ctx.strokeStyle = config.strokeStyle
ctx.lineCap = config.lineCap
ctx.lineJoin = config.lineJoin
// 設(shè)置畫線起始點(diǎn)位
ctx.moveTo(client.endX, client.endY)
// 監(jiān)聽 鼠標(biāo)移動(dòng)或手勢(shì)移動(dòng)
window.addEventListener(mobileStatus ? "touchmove" : "mousemove", draw)
}
// 繪制
const draw = event => {
// 獲取當(dāng)前坐標(biāo)點(diǎn)位
const { pageX, pageY } = mobileStatus ? event.changedTouches[0] : event
// 修改最后一次繪制的坐標(biāo)點(diǎn)
client.endX = pageX
client.endY = pageY
// 根據(jù)坐標(biāo)點(diǎn)位移動(dòng)添加線條
ctx.lineTo(pageX , pageY )
// 繪制
ctx.stroke()
}
// 結(jié)束繪制
const cloaseDraw = () => {
// 結(jié)束繪制
ctx.closePath()
// 移除鼠標(biāo)移動(dòng)或手勢(shì)移動(dòng)監(jiān)聽器
window.removeEventListener("mousemove", draw)
}
// 創(chuàng)建鼠標(biāo)/手勢(shì)按下監(jiān)聽器
window.addEventListener(mobileStatus ? "touchstart" : "mousedown", init)
// 創(chuàng)建鼠標(biāo)/手勢(shì) 彈起/離開 監(jiān)聽器
window.addEventListener(mobileStatus ? "touchend" :"mouseup", cloaseDraw)
// 取消-清空畫布
const cancel = () => {
// 清空當(dāng)前畫布上的所有繪制內(nèi)容
ctx.clearRect(0, 0, config.width, config.height)
}
// 保存-將畫布內(nèi)容保存為圖片
const save = () => {
// 將canvas上的內(nèi)容轉(zhuǎn)成blob流
canvas.toBlob(blob => {
// 獲取當(dāng)前時(shí)間并轉(zhuǎn)成字符串，用來當(dāng)做文件名
const date = Date.now().toString()
// 創(chuàng)建一個(gè) a 標(biāo)簽
const a = document.createElement('a')
// 設(shè)置 a 標(biāo)簽的下載文件名
a.download = `${date}.png`
// 設(shè)置 a 標(biāo)簽的跳轉(zhuǎn)路徑為 文件流地址
a.href = URL.createObjectURL(blob)
// 手動(dòng)觸發(fā) a 標(biāo)簽的點(diǎn)擊事件
a.click()
// 移除 a 標(biāo)簽
a.remove()
})
}
</script>
</html>Mozilla 程序從 Gecko 1.8 (Firefox 1.5 (en-US)) 開始支持 <canvas>。它首先是由 Apple 引入的，用于 OS X Dashboard 和 Safari。Internet Explorer 從 IE9 開始支持<canvas> ，更舊版本的 IE 中，頁面可以通過引入 Google 的 Explorer Canvas 項(xiàng)目中的腳本來獲得<canvas>支持。Google Chrome 和 Opera 9+ 也支持 <canvas>。
在小程序中我們?nèi)绻柩綄?shí)現(xiàn)的話，也是同樣的原理哦，只是我們需要將創(chuàng)建實(shí)例和上下文的Api進(jìn)行修改，因?yàn)樾〕绦蛑惺菦]有dom，既然沒有dom，哪來的操作dom這個(gè)操作呢。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
