mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-01-20 22:39:50 -05:00
Commit initial support for Shape class.
Hit testing is still missing.
This commit is contained in:
parent
90f2614d52
commit
9da392a99c
4 changed files with 97 additions and 4 deletions
92
src/item/Shape.js
Normal file
92
src/item/Shape.js
Normal file
|
@ -0,0 +1,92 @@
|
||||||
|
/*
|
||||||
|
* Paper.js - The Swiss Army Knife of Vector Graphics Scripting.
|
||||||
|
* http://paperjs.org/
|
||||||
|
*
|
||||||
|
* Copyright (c) 2011 - 2013, Juerg Lehni & Jonathan Puckey
|
||||||
|
* http://lehni.org/ & http://jonathanpuckey.com/
|
||||||
|
*
|
||||||
|
* Distributed under the MIT license. See LICENSE file for details.
|
||||||
|
*
|
||||||
|
* All rights reserved.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @name Shape
|
||||||
|
*
|
||||||
|
* @class
|
||||||
|
*
|
||||||
|
* @extends Item
|
||||||
|
*/
|
||||||
|
var Shape = this.Shape = Item.extend(/** @lends Shape# */{
|
||||||
|
_class: 'Shape',
|
||||||
|
|
||||||
|
initialize: function(type, size) {
|
||||||
|
this.base();
|
||||||
|
this._type = type;
|
||||||
|
this._size = size;
|
||||||
|
},
|
||||||
|
|
||||||
|
_draw: function(ctx, param) {
|
||||||
|
var style = this._style,
|
||||||
|
size = this._size,
|
||||||
|
width = size.width,
|
||||||
|
height = size.height,
|
||||||
|
fillColor = style._fillColor,
|
||||||
|
strokeColor = style._strokeColor;
|
||||||
|
if (fillColor || strokeColor || param.clip) {
|
||||||
|
ctx.beginPath();
|
||||||
|
switch (this._type) {
|
||||||
|
case 'rect':
|
||||||
|
ctx.rect(-width / 2, -height / 2, width, height);
|
||||||
|
break;
|
||||||
|
case 'circle':
|
||||||
|
ctx.arc(0, 0, width, 0, Math.PI * 2, true);
|
||||||
|
break;
|
||||||
|
case 'ellipse':
|
||||||
|
var kappa = Numerical.KAPPA,
|
||||||
|
cx = width * kappa,
|
||||||
|
cy = height * kappa,
|
||||||
|
mx = width / 2,
|
||||||
|
my = height / 2;
|
||||||
|
ctx.moveTo(0, my);
|
||||||
|
ctx.bezierCurveTo(0, my - cy, mx - cx, 0, mx, 0);
|
||||||
|
ctx.bezierCurveTo(mx + cx, 0, width, my - cy, width, my);
|
||||||
|
ctx.bezierCurveTo(width, my + cy, mx + cx, height, mx, height);
|
||||||
|
ctx.bezierCurveTo(mx - cx, height, 0, my + cy, 0, my);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!param.clip && (fillColor || strokeColor)) {
|
||||||
|
this._setStyles(ctx);
|
||||||
|
if (fillColor)
|
||||||
|
ctx.fill();
|
||||||
|
if (strokeColor)
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
_getBounds: function(getter, matrix) {
|
||||||
|
var rect = new Rectangle(this._size).setCenter(0, 0);
|
||||||
|
return matrix ? matrix._transformBounds(rect) : rect;
|
||||||
|
},
|
||||||
|
|
||||||
|
statics: {
|
||||||
|
Circle: function(/* center, radius */) {
|
||||||
|
var center = Point.readNamed(arguments, 'center'),
|
||||||
|
radius = Base.readNamed(arguments, 'radius');
|
||||||
|
return new Shape('circle', new Size(radius)).translate(center);
|
||||||
|
},
|
||||||
|
|
||||||
|
Rectangle: function(/* rectangle */) {
|
||||||
|
var rect = Rectangle.readNamed(arguments, 'rectangle');
|
||||||
|
return new Shape('rect', rect.getSize(true)).translate(
|
||||||
|
rect.getCenter(true));
|
||||||
|
},
|
||||||
|
|
||||||
|
Ellipse: function(/* rectangle */) {
|
||||||
|
var rect = Rectangle.readNamed(arguments, 'rectangle');
|
||||||
|
return new Shape('ellipse', rect.getSize(true)).translate(
|
||||||
|
rect.getCenter(true));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
|
@ -62,6 +62,7 @@ var paper = new function() {
|
||||||
/*#*/ include('item/Item.js');
|
/*#*/ include('item/Item.js');
|
||||||
/*#*/ include('item/Group.js');
|
/*#*/ include('item/Group.js');
|
||||||
/*#*/ include('item/Layer.js');
|
/*#*/ include('item/Layer.js');
|
||||||
|
/*#*/ include('item/Shape.js');
|
||||||
/*#*/ include('item/Raster.js');
|
/*#*/ include('item/Raster.js');
|
||||||
/*#*/ include('item/PlacedSymbol.js');
|
/*#*/ include('item/PlacedSymbol.js');
|
||||||
/*#*/ include('item/HitResult.js');
|
/*#*/ include('item/HitResult.js');
|
||||||
|
|
|
@ -20,7 +20,7 @@ Path.inject({ statics: new function() {
|
||||||
return path;
|
return path;
|
||||||
}
|
}
|
||||||
|
|
||||||
function createRectangle(/* rect */) {
|
function createRectangle(/* rectangle */) {
|
||||||
var rect = Rectangle.readNamed(arguments, 'rectangle'),
|
var rect = Rectangle.readNamed(arguments, 'rectangle'),
|
||||||
radius = Size.readNamed(arguments, 'radius', 0, 0, false, true), // readNull
|
radius = Size.readNamed(arguments, 'radius', 0, 0, false, true), // readNull
|
||||||
bl = rect.getBottomLeft(true),
|
bl = rect.getBottomLeft(true),
|
||||||
|
@ -65,7 +65,7 @@ Path.inject({ statics: new function() {
|
||||||
new Segment([0.5, 1], [kappa, 0 ], [-kappa, 0])
|
new Segment([0.5, 1], [kappa, 0 ], [-kappa, 0])
|
||||||
];
|
];
|
||||||
|
|
||||||
function createEllipse(/* rect */) {
|
function createEllipse(/* rectangle */) {
|
||||||
var rect = Rectangle.readNamed(arguments, 'rectangle'),
|
var rect = Rectangle.readNamed(arguments, 'rectangle'),
|
||||||
path = createPath(arguments),
|
path = createPath(arguments),
|
||||||
point = rect.getPoint(true),
|
point = rect.getPoint(true),
|
||||||
|
|
|
@ -1831,8 +1831,8 @@ var Path = this.Path = PathItem.extend(/** @lends Path# */{
|
||||||
|
|
||||||
// Prepare the canvas path if we have any situation that requires it
|
// Prepare the canvas path if we have any situation that requires it
|
||||||
// to be defined.
|
// to be defined.
|
||||||
if (param.compound || param.clip || fillColor || strokeColor
|
if (fillColor || strokeColor && !drawDash || param.compound
|
||||||
&& !drawDash)
|
|| param.clip)
|
||||||
drawSegments(ctx, this);
|
drawSegments(ctx, this);
|
||||||
|
|
||||||
if (this._closed)
|
if (this._closed)
|
||||||
|
|
Loading…
Reference in a new issue