整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
分享成果，随喜正能量】宁可正而不足，不可邪而有余。相识满天下，知心能几人。书七成，戏三分，牛皮灯影胡编成。布施不如还债，修福不如避祸。勿以恶小而为之，勿以善小而不为。。
《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小时内与您取得联系。
