在上一章中，我们Yi经实现了部分Canvas类的功Neng，但是仅仅是实现了事件系统相关的功Neng，还有hen多交互功Neng，我们并没有实现，在实现这些交互功Neng之前，我们需要了解一些前置知识，以帮助理解如何实现这些交互功Neng。本文的目的，就是让大家来了解这些前置知识。

在pixijs实现一个具有拖拽、旋转、缩放、多选、编辑的记事板这篇文章里的2.5节，我们实现了缩放画布的功Neng，咱就是说当时我是费了不少劲，害。

我们的思路是这样的：

以上的实现方式，是从几何的角度来完成的，但是Ru果从代数的角度来实现这个功Neng，会让过程变得geng加简单一些，你懂的。

画布的缩放，是通过scale+translate来实现的，这两个变换的叠加顺序是：先scale、再translate，所以画布点->视窗点的转换逻辑有如下公式：

我们要理解画布点->视窗点的转换逻辑，说实话，这个转换逻辑还是挺重要的。

不对不对，应该是先了解视窗点->画布点的转换逻辑，因为我们大多数情况下dou是通过鼠标在视窗上的操作，来控制画布上的元素，哈哈。

为啥要说这个呢，因为Zui近有个哥们问我，为什么百度不收录他的网站，我就跟他说你得检查检查你的网站有没有被K过或者是不是有啥技术问题，结果他说他dou没用过百度，我那个那个... 啊，对了其实这个问题hen简单，就是因为他的网站内容不够丰富，或者说不够高质量，你知道吗？

好了不扯远了继续说我们的画布缩放。

得到了新的scale和新的translate，我们就得到了画布的新的状态，把这个新的状态设置给画布，就实现了画布的平移，嗯，就这么简单。

Fabric.js 是一个hen强大的Canvas库，但是它也有一些局限性，比如说它的性Neng在大规模渲染的时候，会有点吃力，而Pixi.js则是一个专门为高性Neng渲染而生的库，所以用Pixi.js来重构Fabric.js的一些交互功Neng，是一个不错的选择，你懂的。

但是重构的过程中，还是会遇到一些挑战，比如说如何实现Fabric.js中的某些特定的交互功Neng，这些功Neng可Neng在Pixi.js中并没有现成的API，这就需要我们去深入理解这两个库的实现原理，然后根据实际需求，来选择合适的解决方案，哈哈。

比如说在Fabric.js中，有一个hen方便的功Neng，就是Ke以轻松地实现对象的多选，而在Pixi.js中，这个功Neng就需要我们自己来实现，不过也不是hen难，只要我们理解了Pixi.js的事件系统，然后根据实际需求，来编写相应的代码，就Ke以实现了说实话，还是挺简单的。

所以Ru果你正在考虑用Pixi.js来重构Fabric.js的一些交互功Neng，那么希望本文Neng给你提供一些帮助，嗯，就酱。