今天是本系列的最后一篇，基本功能都已经实现了。
今天完成的功能包括：
- 移动画布/缩放画布
- 完成和require.js的集成
- 按照Backbone风格进行了代码重构
- 解决了鼠标事件坐标位置的转化，使得弹出菜单能够在正确的位置显示
效果图和昨天类似，今天就不再重复了，下面就按功能点进行具体解释吧。
移动/缩放画布
鼠标在画布空白位置按下-移动，带动画布一起运动，然后松开鼠标，结束移动。
主要涉及的事件为blank:pointerdown、blank:pointermove和blank:pointerup，函数则是paper.translate，获取画布原来的原点位置paper.options.origin。
'blank:pointerdown': function(evt, x, y){
self.startX = x;
self.startY = y;
self.origin = self.paper.options.origin;
self.startMove = true;
},
'blank:pointermove': function(evt, x, y) {
if (self.startMove) {
var diffX = x - self.startX + self.origin.x;
var diffY = y - self.startY + self.origin.y;
self.paper.translate(diffX, diffY);
}
},
'blank:pointerup': function(evt, x, y) {
self.startMove = false;
},
鼠标在画布空白位置通过滚轮对画布进行缩放，此时需要同时按下Ctrl键。
主要涉及事件为blank:mousewheel，函数为paper.scale，这个函数无参数是为get方法，有参数就变成了set方法。
'blank:mousewheel': function(evt, x, y, delta) {
if (evt.ctrlKey) {
evt.preventDefault();
var scaleDelta = (delta > 0) ? 1.1 : 0.9;
var sx = self.paper.scale().sx * scaleDelta;
var sy = self.paper.scale().sy * scaleDelta;
self.paper.scale(sx, sy);
}
},
与Require.js的集成
集成中最主要的困难就是joint依赖lodash和backbone，而backbone又依赖underscore，而且我还引入了部分rappid的代码，这部分代码是老代码，也依赖underscore，这就给引入带来了困难。
最后我的解决方案是使用lodash，然后在map中设置underscore对应到lodash，并修改了rappid代码，转换到了lodash风格。
map: {
'*': {
'underscore': 'lodash'
}
},
引入rappid
define(['joint'], function(a) {
a.ui.Inspector = a.mvc.View.extend({
className: "inspector",
....
});
...
});
代码重构
原则上和graph相关的放到model中，和paper相关的放到view中，界面事件触发的回调函数定义中view中，需要操作graph的则调用this.model.fn。
鼠标事件位置转换
其实这个只需要调用paper的localToPagePoint函数就可以实现了。
showContextMenu: function(menu, x, y) {
var point = this.paper.localToPagePoint(x, y);
this.context.show(menu, point.x, point.y);
},