/**
* PS钢笔工具所用的表示可绘制的控制点集合对象
*/
define( function ( require, exports, module ) {
var Utils = require( "core/utils" ),
Rect = require( "graphic/rect" ),
Color = require( "graphic/color" ),
Pen = require( "graphic/pen" ),
Line = require( "graphic/line" ),
Circle = require( "graphic/circle" );
var GroupUtils = {
listenVertex: function ( point, group, index ) {
GroupUtils.listen( PointGroup.TYPE_VERTEX, point, group, index );
},
listenForward: function ( point, group, index ) {
GroupUtils.listen( PointGroup.TYPE_FORWARD, point, group, index );
},
listenBackward: function ( point, group, index ) {
GroupUtils.listen( PointGroup.TYPE_BACKWARD, point, group, index );
},
listen: function ( pointType, point, group, index ) {
point.on( "mousedown", function ( e ) {
group.trigger( 'pointmousedown', {
targetPointType: pointType,
targetPointIndex: index
} );
} );
}
};
var PointGroup = require( "core/class" ).createClass( "PointGroup", {
base: require( "graphic/group" ),
constructor: function () {
this.callBase();
this.points = [];
this.pointShapes = [];
this.exterior = {
vertex: {
width: 4 * 100,
height: 4 * 100
},
control: {
radius: 1.5 * 100
},
pen: {
width: 1 * 100
}
};
this.handler = {
'mousedown': [],
'mouseup': []
};
},
indexOf: function ( bezierPoint ) {
var index = -1;
if ( this.points.indexOf ) {
return this.points.indexOf( bezierPoint );
} else {
Utils.each( this.points, function ( point, i ) {
if ( point === bezierPoint ) {
index = i;
return false;
}
} );
return index;
}
},
// 获取顶点宽度
getVertexWidth: function () {
return this.exterior.vertex.width;
},
getPoints: function () {
return this.points.slice( 0 );
},
getPointByIndex: function ( index ) {
return this.points[ index ] || null;
},
getLastPoint: function () {
return this.points[ this.points.length - 1 ] || null;
},
addPoint: function ( point ) {
point.container = this;
this.points.push( point );
this.onChanged();
return this;
},
onChanged: function () {
this._draw();
},
update: function ( sourcePoint ) {
// 数据发生改变， 重绘当前点
this._redraw( sourcePoint );
},
// 选中给定索引的点，该操作会引起其他点的连锁反应
selectPoint: function ( index ) {
var shapeGroup = this.pointShapes[ index ];
// 重绘当前点
this._redraw( this.getPointByIndex( index ) );
// 清空其他点的
Utils.each( this.pointShapes, function ( shape, i ) {
if ( i !== index ) {
this._clearShapePoint( i );
}
}, this );
// 更新辅助点
if ( index > 0 ) {
this._drawAssistPoint( index-1 );
}
},
_draw: function () {
var point = this.getLastPoint(),
currentIndex = this.pointShapes.length;
this._drawPoint( point, currentIndex );
// 绘制辅助点
if ( currentIndex > 0 ) {
this._drawAssistPoint( currentIndex - 1 );
}
},
_redraw: function ( point ) {
//寻找源所对应的图形
var index = this.indexOf( point ),
shape = this.pointShapes[ index ];
var vertex = point.getVertex(),
forward = point.getForward(),
backward = point.getBackward();
// 更新图形
shape.forward.setCenter( forward.x, forward.y );
shape.backward.setCenter( backward.x, backward.y );
shape.line.setPoint1( forward.x, forward.y ).setPoint2( backward.x, backward.y );
shape.vertex.setPosition( vertex.x - this.exterior.vertex.width / 2, vertex.y - this.exterior.vertex.height / 2 );
this._stroke( shape.vertex );
},
_drawPoint: function ( point, index ) {
var forward = point.getForward(),
backward = point.getBackward(),
shape = null;
shape = {};
this.pointShapes[ index ] = shape;
//控制线
shape.line = this._drawLine( forward, backward );
//前置控制点
shape.forward = this._drawForward( forward, index );
//后置控制点
shape.backward = this._drawBackward( backward, index );
//vertex
shape.vertex = this._drawVertex( point.getVertex(), index );
},
// 清理指定索引的图形点, 使得该点仅显示一个顶点
_clearShapePoint: function ( index ) {
var shape = this.pointShapes[ index ],
// 当前的包含的数据点
vertex = this.points[ index ].getVertex();
shape.line.setPoint1( vertex.x, vertex.y ).setPoint2( vertex.x, vertex.y );
shape.forward.setCenter( vertex.x, vertex.y );
shape.backward.setCenter( vertex.x, vertex.y );
this._stroke( shape.vertex, "white" );
},
// 根据指定的索引， 把该索引所对应的点更新成辅助点
// 一个辅助点是当前曲线区间的起点， 它显示出该辅助点的forward控制点和连线
_drawAssistPoint: function ( index ) {
var shape = this.pointShapes[ index ],
// 当前的包含的数据点
bezierPoint = this.points[ index ],
forward = bezierPoint.getForward(),
vertex = bezierPoint.getVertex();
shape.line.setPoint1( vertex.x, vertex.y ).setPoint2( forward.x, forward.y );
shape.forward.setCenter( forward.x, forward.y );
shape.backward.setCenter( vertex.x, vertex.y );
this._stroke( shape.vertex, "white" );
// 清理前一次的辅助点
if ( index > 1 ) {
this._clearShapePoint( index - 1 );
}
},
_drawVertex: function ( vertex, index ) {
var width = this.exterior.vertex.width,
height = this.exterior.vertex.height,
vertextRect = new Rect( width, height, vertex.x - width / 2 , vertex.y - height / 2 );
//记录下图形
this._stroke( vertextRect );
this.addShape( vertextRect );
GroupUtils.listenVertex( vertextRect, this, index );
return vertextRect;
},
_drawForward: function ( point, index ) {
var forwardPoint = this._drawControl( point );
GroupUtils.listenForward( forwardPoint, this, index );
return forwardPoint;
},
_drawBackward: function ( point, index ) {
var backwardPoint = this._drawControl( point );
GroupUtils.listenBackward( backwardPoint, this, index );
return backwardPoint;
},
_drawControl: function ( point ) {
var styles = this.exterior.control,
radius = styles.radius,
controlPoint = new Circle( radius, point.x, point.y );
this._stroke( controlPoint );
this.addShape( controlPoint );
return controlPoint;
},
_drawLine: function ( forward, backward ) {
var line = new Line ( forward.x, forward.y, backward.x, backward.y );
line.stroke( new Pen( new Color( "#2d2d2d" ) ).setWidth( this.exterior.pen.width ) );
this.addShape( line );
return line;
},
_stroke: function ( shape, fillColor ) {
shape.stroke( new Pen( new Color( "#2d2d2d" ) ).setWidth( this.exterior.pen.width ) );
shape.fill( new Color( fillColor || "black" ) );
}
} );
Utils.extend( PointGroup, {
// 顶点类型常量
TYPE_VERTEX: "vertex",
TYPE_FORWARD: "forward",
TYPE_BACKWARD: "backward"
} );
return PointGroup;
} );