/*
* PS 钢笔工具 控制逻辑
*/
define( function ( require, exports, module ) {
// 资源引入
var Bezier = require( "graphic/bezier" ),
Color = require( "graphic/color" ),
Pen = require( "graphic/pen" ),
Utils = require( "core/utils" ),
Vector = require( "graphic/vector" ),
// 引入可绘制的点集合
PointGroup = require( "../ps-pen/demo.pointgroup" ),
BezierPoint = require( "graphic/bezierpoint" );
function Controller ( paper ) {
this.paper = paper || null;
this.bezier = null;
this.bezierPoints = null;
this.pointGroup = null;
this.drawState = false;
// 记录当前是否处于更新状态
this.modifyState = false;
// 记录更新状态的持久信息
this._modifyStatus = null;
// 允许重新拖动编辑的
this.editable = false;
}
Utils.extend( Controller.prototype, {
takeover: function ( paper ) {
paper && ( this.paper = paper );
initListener( this );
},
enableDraw: function () {
this.drawState = true;
},
disableDraw: function () {
this.drawState = false;
},
enableModify: function () {
this.modifyState = true;
},
disableModify: function () {
this.modifyState = false;
},
// 设置更新状态
setModifyStatus: function ( status ) {
this._modifyStatus = status;
},
clearModifySatus: function () {
this._modifyStatus = null;
},
getModifyStatus: function () {
return this._modifyStatus;
},
enableEdit: function () {
this.editable = true;
},
disableEdit: function () {
this.editable = false;
},
setBezier: function ( bezier ) {
this.bezier = bezier;
this.bezierPoints = [];
return this;
},
getBezier: function () {
return this.bezier;
},
setPointGroup: function ( pointGroup ) {
this.pointGroup = pointGroup;
return this;
},
getPointGroup: function () {
return this.pointGroup;
},
addPoint: function ( point ) {
this.bezierPoints && this.bezierPoints.push( point );
return this;
},
getPoints: function () {
return this.bezierPoints;
}
} );
return Controller;
// 私有方法实现
// 初始化交互事件监听器
function initListener ( controller ) {
// 记录是否允许所有事件的监听
var isBegin = false,
// 记录是否需要更新曲线
isUpdateable = false,
paper = controller.paper,
currentBezier = null,
currentPointGroup = null;
paper.on( "mousedown", function ( e ) {
var point = null;
e.preventDefault();
if ( !controller.drawState ) {
return;
}
// 切换监听状态
if ( !isBegin ) {
isBegin = true;
currentBezier = createBezier( paper );
currentPointGroup = createPointGroup( paper );
listenPointGroup( currentPointGroup, controller );
//设置当前controller处理的贝塞尔曲线
controller.setBezier( currentBezier );
controller.setPointGroup( currentPointGroup );
}
isUpdateable = false;
// 获取当前鼠标点击在用户坐标系上的映射点
point = e.getPosition();
updateBezier( controller, point );
} );
// 绘制时 更新控制点
paper.on( "mousemove", function ( e ) {
var point = null,
bezierPoint = null;
e.preventDefault();
if ( !controller.drawState ) {
return;
}
if ( !isBegin || isUpdateable ) {
return;
}
point = e.getPosition();
currentBezier.getLastPoint().setForward( point.x, point.y );
currentPointGroup.getLastPoint().setForward( point.x, point.y );
} );
// 编辑时拖动更新
paper.on( "mousemove", function ( e ) {
var mousePoint = null,
currentPoint = null,
pointIndex = -1;
e.preventDefault();
// 不可编辑
if ( !controller.editable ) {
return;
}
mousePoint = e.getPosition();
pointIndex = controller._modifyStatus.pointIndex;
currentPoint = currentPointGroup.getPointByIndex( pointIndex );
switch ( controller._modifyStatus.pointType ) {
case PointGroup.TYPE_FORWARD:
currentPoint.setForward( mousePoint.x, mousePoint.y );
currentBezier.getPoint( pointIndex ).setForward( mousePoint.x, mousePoint.y );
break;
case PointGroup.TYPE_BACKWARD:
currentPoint.setBackward( mousePoint.x, mousePoint.y );
currentBezier.getPoint( pointIndex ).setBackward( mousePoint.x, mousePoint.y );
break;
case PointGroup.TYPE_VERTEX:
currentPoint.moveTo( mousePoint.x, mousePoint.y );
currentBezier.getPoint( pointIndex ).moveTo( mousePoint.x, mousePoint.y );
break;
}
} );
paper.on( "mouseup", function () {
if ( controller.drawState ) {
isUpdateable = isBegin;
} else if ( controller.modifyState ) {
controller.disableEdit();
// 清空状态
controller.clearModifySatus();
}
} );
}
// 画贝塞尔曲线
function updateBezier ( controller, point ) {
var bezierPoint = new BezierPoint( point.x, point.y, true );
//添加可绘制控制点
controller.getPointGroup().addPoint( bezierPoint.clone() );
//记录贝塞尔的控制点
controller.addPoint( bezierPoint );
//更新贝塞尔曲线的点
controller.getBezier().setPoints( controller.getPoints() );
}
// 创建一个新的贝塞尔
function createBezier ( paper ) {
var bezier = new Bezier();
bezier.stroke( new Pen( new Color( "black" ) ).setWidth( 100 ) );
paper.addShape( bezier );
return bezier;
}
function createPointGroup ( paper ) {
var pointGroup = new PointGroup();
paper.addShape( pointGroup );
return pointGroup;
}
// 监听点上的事件
function listenPointGroup ( pointGroup, controller ) {
pointGroup.on( "pointmousedown", function ( e ) {
var currentPoint = null,
currentType = null,
index = -1,
vertexWidth = 0;
// 非modify状态， 不处理
if ( !controller.modifyState ) {
return;
}
index = e.targetPointIndex;
currentType = e.targetPointType;
currentPoint = pointGroup.getPointByIndex( index );
// 获取到当前顶点的宽度
vertexWidth = pointGroup.getVertexWidth();
// 检查当前点击的点的控制点是否和顶点重叠
// 如果重叠了， 则认为点击是发生在forward的控制点上的
if ( currentType === PointGroup.TYPE_VERTEX ) {
//更新点类型
switch ( checkOverlapping( currentPoint, vertexWidth ) ) {
case 1:
currentType = PointGroup.TYPE_FORWARD;
break;
case 2:
currentType = PointGroup.TYPE_BACKWARD
break;
}
}
// 运行更新
controller.enableEdit();
controller.setModifyStatus( {
pointType: currentType,
pointIndex: index
} );
//更新当前的点
this.selectPoint( index );
} );
}
// 工具方法， 检测贝塞尔曲线上的点的控制点和顶点是否重叠在一起
// 参数distance控制了点之间的最小距离， 如果不大于该距离， 则认为是重叠的
// 返回值有： 0： 无重叠， 1： forward重叠， 2： backward重叠
function checkOverlapping ( bezierPoint, distance ) {
var forward = bezierPoint.getForward(),
backward = bezierPoint.getBackward(),
vertex = bezierPoint.getVertex();
if ( Vector.fromPoints( forward, vertex ).length() <= distance ) {
// forward重叠
return 1;
} else if ( Vector.fromPoints( backward, vertex ).length() <= distance ) {
// backward重叠
return 2;
}
// 无重叠
return 0;
}
} );