平铺图片在线视频

今天，我将给大家介绍如何在画布上平铺图片

好，下面开始我们今天的内容

下面我们来看如何在画布上绘制单张的图片

我们先做第一步最简单的工作，产生一个400X400的一个画布

这个工作大家应该比较熟悉，我们直接点运行

好，没有问题

那么现在的工作是如何在我们得到这个画布上展示我们的图片

我们要显示的图片是我们本周项目的主人公“caocao”

好，我们点击“Projrct”，点击我们正在编辑的主程序

点右键，在这里有一个“Reveal in Finder”，也就是“在文件夹中显示”

大家可以看到，

和我们的主程序在同一个目录下有一个“Images”这样一个文件夹

大家注意，在这里也有一个“images”

好，我们打开，这里面有个“caocao.png”，这里面也有个“caocao.png”， OK，我们双击打开

我们可以看到曹操的这个图片

好，我们选中以后点右键有一个显示简介

我们可以看到我们要操作的这个图片它的尺寸大小200X200像素

OK，有了这些信息，我们下面对这个图片进行操作

我们加载图片有两种方式，一种是通过本地资源的加载

一种是通过网络资源的加载，我们先通过本地加载给大家演示

好，我们先给出两个常量，也就是我们曹操图片的尺寸大小是200X200

那么，曹操图片的中心点坐标100X100，这个很简单

下面是本地加载，本地加载的语法“gui.load_image”

刚才我已经给大家演示了“caocao.png”是放在主程序相同目录下 有一个“images”文件夹这个里面

所以我们在这里只需要写它的相对路径就可以了

好，然后这个地方给一个文件名，OK，没有问题

下面我们定义绘制函数

定义一个draw函数，绘制图片的语法canvas.draw_image

在这里有这样几个参数给大家解释一下

第一个，“card_image”，也就是我们刚刚加载的 这个图片名称“card_image”

第二个参数是，我们加载的这个图片它的中心坐标，就是我们给的这个常量

第三个是我们加载的这个图片它的尺寸大小，是[200，200]，没有问题

第四个参数，是我们打算要在我们画布的哪个位置运行显示该图片资料

我们给的是[200，200]

第五个参数是我准备要把这个图片显示成多大的尺寸

因为我们这个图片标准尺寸是200X200

所以我们也把这个给成200X200，也就是CARD_SIZE，我们没有改变

OK，有了这个函数以后，我们要注册

我们要注册这个frame.set_draw_handler(draw)函数

OK，我们来运行一下

看起来很简单，在我们画布正中间就显示出了曹操的图片

如果我把这个[200，200]改成[100，200]，我们再运行一下

也就是说，我们在画布的[100，200]这个中心位置开始绘制

绘制成多大呢？200X200的这样一个图片，所以它是在这个位置

好，我们把它改回去

好，我们再换draw函数下面的注释行

大家可以看到前面的参数都没有改变，只是在最后一个参数进行了改变

什么呢？就是我们要将图片绘制成多大进行了修改

上面这一行没有进行任何修改，是一个标准尺寸

下面变成了[100，100]，我们来运行看看是什么结果

结果是对我们这个图片进行了一个缩小的一个显示

好，我们再将第二行注释，将第三行展开

那么本身是200X200，在这里我们写成了400X400

也就是和我们的画布大小一致，我们再来运行一下

原来是对我们的图片进行的一个放大的显示

OK，看起来很简单

好，那么这是我们第一种图片加载方式的一种显示

那么，第二种是通过网络资源的加载

首先，我们在这里给出一个图片资源的网络地址

那么，你首先要去确认该图片资源是否能够正常显示

打开我们的浏览器，在这里输入它的地址，然后敲回车

如果显示正确，说明该资源是存在的

我们这两行唯一的区别就是一个是本地加载，一个是网络资源的加载

好，下面我们直接运行就可以了

运行网络加载比较慢，好，这是加载正常，没有问题

因为我刚才点了两次运行

好，这就是我们对一张图片资源的一个画布上怎么样去显示的一个实例

下面我再给大家讲解另一种多张图片在同一张图片资源中如何去 逐一显示的一个实例

首先我们来看一下我们要进行操作的图片

我们将本周项目的所有人物集合在一张图片内，我们要将它们逐一的进行绘制

那么在这里，我们前四张图片的尺寸大小是一样的

黄忠、张飞、马超、赵云，都是100X200的

那么第二类图片，也就是我们的主人公曹操

它是比较特殊的，是最大的，是200X200的

第三类图片是关羽，它的尺寸是200X100的

那么第四类图片是士兵，它是100X100的

好，我们先给出黄忠这个图片的中心位置，也就是card_center

因为它的尺寸大小是100X200，那么它的card_center很 容易得到50X100（[50,100]）

那么它的card_size就是它的尺寸大小，没有问题

我怎么样能够得到张飞、马超、赵云的中心位置呢

我们给每个人物标上一个数字，0、1、2、3、4、5、6

我们统一用i来表示，我们知道黄忠和张飞中心坐标水平分量是差了100

垂直分量是没有改变，那么，对于马超和赵云具有相同的规律

好，那么也就是说当i小于4的时候，它们的中心坐标可以用 这个表达式去表示

当i等于0，就是黄忠的中心坐标，那么当i等于1，1乘以card_size[0]

我们知道card_size[0]是100，也就是1乘以100

就是张飞的中心坐标水平分量，垂直分量没有变

以此类推，i等于2是马超的，i等于3是赵云的

那么对于第二类图片，也就是我们的曹操

它的中心坐标是不是也能这样得到呢

我们看一下，当i等于4，如果我们还按这个方法去计算

我们得到的其实是红色圆点所示的位置

那么我们可以明显看出它和我们的中心坐标红色三角是不一致的

那么它们两个之间中心坐标水平分量我们可以看出是差50

而垂直分量是相同，也就是说，当i等于4的时候

我们只需要将第一类图片的表达式进行一个修改

在后面，水平分量加50，垂直分量不用动

那么当i等于5，我们如果还沿用第一类得到的是什么结果呢

是绿色圆点所示的位置，而关羽真正的中心坐标是绿色三角所示的位置

我们观察一下可以得到，中心坐标水平分量相差了是150

那么中心坐标垂直分量应该是得到的结果除以2

好，我们将第一个中心坐标简单的变化一下就可以得到关羽的中心坐标

那么第四类也就是我们的士兵，当i等于6的时候

那么它的中心坐标如果我们仍然沿用第一类得到的是紫色圆点所示的位置

而我真正士兵的中心位置是绿色三角形所示的位置

我们观察可以得到这两个中心坐标水平分量相差是200

垂直分量应该是得到的结果除以2

那么这样我们可以很快得到所有图片的中心坐标

我们看一看在代码里怎么样去进行绘制

因为我们绘制的最大图片是曹操200X200

我们给的这个画布的宽和高是200X200

那么在这里呢，我们给出了这样子的常量

首先是CARD_CENTER，也就是我们黄忠的中心坐标[50，100]

我们把它分为了四类，黄忠、张飞、马超、赵云为第一类

所有尺寸都是100X200，曹操是第二类，200X200

关羽是第三类，200X100，士兵是第四类，100X100

我们所使用的是本地加载图片资源，我们可以看一下

点右键，在Images里面有一个图片合集

那么这就是我们要操作的图片，OK

下面我们定义一个图片类，首先是初始化

那么在这里呢我们只有一个参数，也就是你打算要绘制的是谁

你告诉我，然后我把它复制为我的域user

那么在这里呢，我定义了一个draw方法

它有两个参数，一个是canvas，一个是loc

也就是我们在画布里面要绘制的中心坐标

那么我们在这呢对图片分了四类，当i小于4的时候是一类中心坐标

注意，那么这一类图片呢，它的card_size是第一类

当i等于4的时候是第二类，那么它的中心坐标是加50

它的size是第二类，那么当i等于5的时候

中心坐标水平分量加150，垂直分量除以2

它的card_size是第三类的图片尺寸，那么当i等于6，也就是我们的士兵

它的中心坐标是水平加200，垂直除以2 ，它的尺寸大小是第四类

然后在draw方法里我定义了一个canvas.draw_image这样一个绘制函数

我调用了这个draw_image函数，然后绘制图片是我们刚才加载的

然后图片的中心坐标通过上面我已经得到了

图片的大小根据不同的类型，那么它的图片大小是不一样的

绘制的位置大家都一样，绘制的尺寸根据图片的实际尺寸进行绘制

然后，我们定义了一个实例对象one_card，在这里呢

我们先来绘制“马超”，我们定义了绘制函数

我们调用这个实例对象one_card的draw方法

它这个里面传递了两个参数canvas和绘制的位置

我们这地方是canvas，绘制的位置是我们画布的正中心[100，100]

好，我们创建一个框架，然后注册这个draw函数

然后是启动框架，我们来运行一下

那么，这个是我们的马超

好，如果我们换成张飞，再来运行一下，这是张飞

曹操

那么这是我们的曹操

关羽

那么这是我们的关羽

士兵

那么这是我们的士兵

好，我们这节课的内容就到这儿，我们下次再见