整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
分享成果，隨喜正能量】寧可正而不足，不可邪而有余。相識滿天下，知心能幾人。書七成，戲三分，牛皮燈影胡編成。布施不如還債，修福不如避禍。勿以惡小而為之，勿以善小而不為。。
《VBA之Word應用》，是我推出第八套教程，教程是專門講解VBA在Word中的應用，圍繞“面向對象編程”講解，首先讓大家認識Word中VBA的對象，以及對象的屬性、方法，然后通過實例讓大家感受到Word VBA 的妙處。本套教程共三冊十六章，今日內容為第九章：Shapes對象和Shape對象的第1節：在文檔中添加畫布及圖片
在引言部分，我們講了什么是Shapes集合對象及Shape對象，我們這節開始逐步講解這兩個對象的屬性和方法，并結合實例來給大家講解具體的應用。這節我們的內容是Shapes集合對象的Count屬性、AddCanvas方法、AddPicture方法。
這個屬性返回一個Long , 該值代表集合中的形狀的數目。此為只讀屬性。
語法：expression.Count
其中expression 是必須的代表一個Shapes集合的對象.
這個方法在文檔中添加繪圖畫布。返回一個Shape對象，該對象代表繪圖畫布并將其添加到Shapes集合。
語法：expression. AddCanvas(Left,Top,Width, Height,Anchor)
其中expression 是必須的代表一個Shapes集合的對象.
參數：
1）Left 必需 Single 繪圖畫布左邊緣相對于定位標記的位置（以磅為單位）。
2）Top 必需 Single 繪圖畫布上邊緣相對于鎖定標記的位置（以磅為單位）。
3）Width 必需 Single 繪圖畫布的寬度（以磅為單位）。
4）Height 必需 Single 繪圖畫布的高度（以磅為單位）。
5）Anchor 可選 Variant 一個Range對象，該對象代表畫布綁定到的文本。 如果指定了 Anchor，鎖定標記位于鎖定區域第一段的開頭。 如果省略該參數，將自動選定鎖定區域，而畫布將相對于頁面的上邊緣和左邊緣進行定位。
該方法在繪圖畫布上添加一幅圖片。返回一個Shape對象, 該對象代表圖片并將其添加到CanvasShapes集合中。
語法：expression.AddPicture(FileName,LinkToFile,SaveWithDocument,Left,Top,Width, Height)
其中expression 是必須的代表一個Shapes集合的對象.
參數：
1）FileName 必需 String 圖片的路徑和文件名。
2）LinkToFile 可選 Variant 如果為TRUE 要將圖片鏈接到創建它的文件。 False 使圖片文件的獨立副本。 默認值為 False 。
3）SaveWithDocument 可選 Variant 如果為TRUE 要隨文檔一起保存的鏈接的圖片。 默認值為 False。
4）Left 可選 Variant 新圖片的左邊緣相對于繪圖畫布的位置，以磅為單位。
5）Top 可選 Variant 新圖片的上邊緣相對于繪圖畫布的位置，以磅為單位。
6）Width 可選 Variant 圖片的寬度，以磅為單位。
7）Height 可選 Variant 圖片的高度，以磅為單位。
下面我們看一下如何在當前文檔中添加畫布及在畫布中添加圖片。代碼如下：
Sub mynz()
Dim myCanva As Shape
'添加一個畫布
Set myCanva = ActiveDocument.Shapes.AddCanvas(Left:=100, Top:=75, Width:=400, Height:=300)
'在畫布中添加一個圖形
myCanva.CanvasItems.AddPicture FileName:=ThisDocument.Path & "\IMG圖片.jpg", _
LinkToFile:=False, SaveWithDocument:=True, Left:=0, Top:=0, Width:=400, Height:=300
'提示用戶當前文檔中圖形數
MsgBox "當前文檔中的圖形為：" & ActiveDocument.Shapes.Count
End Sub
代碼截圖：
代碼的解讀：（略）
代碼的運行效果：
今日內容回向：
1 Word中Shapes集合對象的Count屬性、AddCanvas方法、AddPicture方法的意義是什么？
2 如何利用VBA在當前文檔中添加畫布及圖片？
本講內容參考程序文件：Doc 009文檔.docm
我20多年的VBA實踐經驗，全部濃縮在下面的各個教程及應用工具中：
【分享成果，隨喜正能量】操千曲而后曉聲，觀千劍而后識器. 不比不知道，一比嚇一跳. 乍富不知新受用，乍貧難改舊家風。精神到處文章老，學問深時意氣平。若要斷酒法，醒眼看醉人。。
anvas實踐練習截圖
Canvas即畫布的意思，我們可以把它當作一個畫板在上面畫圖，類似于web中的canvas。
Python中的Canvas組件有很多用法和選項，由于篇幅限制，我們在這里只說明一些簡單用法，如果需要全面了解其用法，請參考官網資料。
創建一個Canvas很簡單，如下代碼：
root = Tk()
canvas = Canvas(root, width=930, height=620, borderwidth=0)我們本章講述怎么在canvas里創建文章開頭截圖里的各種圖形，主要有方形、文本、線條、圖像、多邊形、橢圓、窗體控件、扇形。
創建長方形只需要指定對角線的兩個坐標即可，如下代碼創建截圖中的正方形：
canvas.create_rectangle([23.0, 47.0, 223.0, 247.0], fill="#4956b2")第一個參數用來指定對角線的坐標，其它關鍵字參數用來定制創建的圖形，如上面代碼指定用顏色值“#4956b2”填充。
創建文本只需要指定中心點即可，如下代碼創建截圖中的文本：
canvas.create_text([430.0, 87.0], text="Python Canvas", font=("courier", 30, "bold"))text用來指定要顯示的文本，font用來指定字體
兩點確定一條直線，創建線條時只需要指定兩個點的坐標即可，如下代碼創建截圖中的直線：
canvas.create_line([280.0, 188.0, 580.0, 188.0])創建圖像時只需要指定中心點和要顯示的圖形對象即可，如下代碼創建截圖中的"頭條"圖像：
image = PhotoImage(file="toutiao.ico")
canvas.create_image([775.0, 175.0], image=image)如果要創建一個多邊形就需要指定各個點的坐標，同時還可以指定填充顏色，如下代碼創建截圖中的五角星：
canvas.create_polygon(get_star_points(430, 310, 100), fill="red")get_star_points是我自己定義的函數，用來獲取圓點是(430, 310)半徑是100的圓形內接五角星的各個頂點，文章后面源碼里有寫。
圓形是特殊的橢圓，當橢圓的長軸與短軸相等時就是一個圓形了。
創建橢圓時需要指定方形的對角線，這個對角線一側的三角形的兩個邊長即對應橢圓的長軸與短軸，對角線的中點是橢圓的中心。
如下代碼創建截圖中的圓形：
canvas.create_oval([15.0, 384.0, 215.0, 584.0], fill="#6db249")前面章節我們講了好多窗體控件，這里我們以按鈕Button為例，如下代碼創建截圖中的按鈕，同時點擊會彈窗顯示信息：
btn = Button(canvas, width=15, height=3, relief=RAISED, text="Canvas Button", font=("courier", 30, "bold"), command=lambda: showinfo("Canvas Button", "I'm a canvas button!"))
canvas.create_window([440.0, 502.0], window=btn)扇形的創建也需要指定對角線的坐標，默認對應于對角線對應方形的右上角，不過我們可以自己指定起始角度和終止角度，這樣創建出來的扇形就不是方形的1/4了，如下代碼創建截圖中的扇形：
canvas.create_arc([653.0, 399.0, 853.0, 599.0], extent=270, fill="#da2076")讓我們來畫一個文章開頭處的截圖，源碼如下：
在游戲產業的多種多樣，從最早的坦克大戰、超級瑪麗到現在的英雄聯盟、刺激戰場等等數不勝數，你還記得最早的迷宮游戲嗎？小猿圈web前端講師今天就為你如何快速實現一個簡單的canvas迷宮游戲，讓你回憶一下小時候的。
實現這個小游戲也不難，讓我們想想，一個迷宮游戲有哪些基本要素。首先當然得有個地圖，然后得有個移動的小人，這兩個我們利用cavans來繪制，接下來是物體移動的程序，這個程序主要包括2個方面：
1、讓物體跟我們指定的指令來移動;
2、檢測物體是否碰到墻體或者出口。
繪制迷宮的地圖和移動的小人
繪制地圖的主要步驟是：
獲取一張地圖的圖片
利用cavans繪制圖像。
迷宮地圖的生成，可以借助谷歌的一個迷宮在線生成器來獲得。
繪制小人也是一樣直接找一個小人的圖片即可，不過這里要注意的是，要找正方形的圖片，因為一會我們需要做移動的碰撞檢測，方形比較好判斷。
接下來就要寫繪制迷宮和小人的主要函數
function drawMaze(mazeFile, startingX, startingY) {
var imgMaze = new Image()
imgMaze.onload = function () {
// 畫布大小調整
canvas.width = imgMaze.width
canvas.height = imgMaze.height
// 繪制笑臉
var imgFace = document.getElementById("face")
context.drawImage(imgMaze, 0, 0)
x = startingX
y = startingY
context.drawImage(imgFace, x, y)
context.stroke()
}
imgMaze.src = mazeFile
}
mazeFile是迷宮的圖片地址，startingX和startingY，是起始點的坐標。在這里圖片引入的方式用了2種，原因是小人的圖片我不經常更換，就直接寫在頁面里，迷宮的地圖打算做成可變的，所以在js里引入，你想把圖片都直接用js引入也沒有問題。其他部分比較簡單，不再贅述。
移動函數
移動的主要原理是：
接受指定的用戶輸入（在這里是響應方向鍵），轉換成對應的移動指令。然后周期性的檢查移動指令，繪制對應的目標位置。舉個簡單的例子：
比如每按下一次方向鍵上，就記錄下應該往上移動，然后每隔100毫秒檢查當前的移動指令，繪制應該移動的目標地點，重復這個過程。代碼也比較簡單：
// 移動函數
function processKey(e) {
dx = 0
dy = 0
// 上下左右方向鍵檢測
if (e.keyCode === 38) {
dy = -1
}
if (e.keyCode === 40) {
dy = 1
}
if (e.keyCode === 37) {
dx = -1
}
if (e.keyCode === 39) {
dx = 1
}
}
// 繪制幀
function drawFrame() {
if (dx != 0 || dy != 0) {
// context.clearRect(x,y,canvas.width,canvas.height)
// 繪制移動軌跡
context.beginPath();
context.fillStyle = "rgb(254,244,207)"
context.rect(x, y, 15, 15)
context.fill()
x += dx
y += dy
// 碰撞檢測
if (checkForCollision()) {
x -= dx
y -= dy
dx = 0
dy = 0
}
//繪制小人應該移動的地點
var imgFace = document.getElementById('face')
context.drawImage(imgFace, x, y)
if (canvas.height - y < 17) {
// isFirst = false
alert('恭喜你通關 游戲結束')
return false
}
// 這里如果重置的話變成非自動移動，也就是每按下一次方向鍵只前進一步，由于目前體驗不好所以先不做重置
// dx = 0
// dy = 0
}
setTimeout(drawFrame, 20)
}
上述代碼中，移動函數比較簡單，繪制幀的函數里面比較重要的就是碰撞檢測函數，在下面詳細解釋。
碰撞檢測
要檢測物體與墻體是否碰撞，通常情況是要先把地圖信息保存到內存里，然后在移動物體時檢測是否與當前的某個墻體碰撞，但是由于我們的地圖背景是黑白迷宮，所以可以使用顏色來檢測碰撞。具體的做法是：
獲取當前物體的坐標位置，利用canvas檢測當前地圖上這個位置的顏色是否為黑色，如果是，說是是墻體，不應該執行移動，下面就是代碼：
function checkForCollision() {
var imageData = context.getImageData(x - 1, y - 1, 15 + 2, 15 + 2)
var pixels = imageData.data
for (var i = 0, len = pixels.length; i < len; i++) {
var red = pixels[i],
green = pixels[i + 1]
blue = pixels[i + 2]
alpha = pixels[i + 3]
// 檢測是否碰到黑色的墻
if (red === 0 && green === 0 && blue === 0) {
return true
}
}
return false
}
在這里，15是小人的寬度，我們檢測小人兩側各1px范圍（對應代碼中的getImageData(x - 1, y - 1, 15 + 2, 15 + 2)可以稍微思考下這里為什么是+2），如果是黑色，說明檢測到碰撞。
其余：
在代碼里，我加了一些其他的功能，比如提示答案等。至于更換地圖也比較簡單：把地圖對應的文件地址，起點坐標，答案圖片路徑等存在一個對象里，然后設置一個地圖數組，點擊的時候切換地圖并重新渲染就可以了。還有一些值得優化的地方，比如：
碰撞檢測在拐彎的地方體驗不佳;
當前情況運行時有軌跡，在答案模式下應該如何去掉軌跡?
有興趣的同學可以試著自己實現下。
上面就是如何快速實現一個簡單的canvas迷宮游戲，還在等什么快去裝環境運行一下去吧，如果遇到問題可以找小猿圈web前端講師去解答，如果你想學習html5開發，小猿圈還是很不錯的，有需要的可以直接去看看的。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
