mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-01-06 04:42:15 -05:00
Implement options.curves
option for hit-testing curves regardless of stroke settings.
This commit is contained in:
parent
d12607dd44
commit
a931a2530c
4 changed files with 39 additions and 27 deletions
|
@ -39,8 +39,8 @@ var HitResult = Base.extend(/** @lends HitResult# */{
|
||||||
*
|
*
|
||||||
* @name HitResult#type
|
* @name HitResult#type
|
||||||
* @property
|
* @property
|
||||||
* @type String('segment', 'handle-in', 'handle-out', 'stroke', 'fill',
|
* @type String('segment', 'handle-in', 'handle-out', 'curve', 'stroke',
|
||||||
* 'bounds', 'center', 'pixel')
|
* 'fill', 'bounds', 'center', 'pixel')
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -62,8 +62,8 @@ var HitResult = Base.extend(/** @lends HitResult# */{
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* If the HitResult has a type of 'stroke', this property gives more
|
* If the HitResult has a type of 'curve' or 'stroke', this property gives
|
||||||
* information about the exact position that was hit on the path.
|
* more information about the exact position that was hit on the path.
|
||||||
*
|
*
|
||||||
* @name HitResult#location
|
* @name HitResult#location
|
||||||
* @property
|
* @property
|
||||||
|
|
|
@ -296,6 +296,9 @@ var Item = Base.extend(Callback, /** @lends Item# */{
|
||||||
* });
|
* });
|
||||||
*/
|
*/
|
||||||
set: function(props) {
|
set: function(props) {
|
||||||
|
// Filter out `insert` since that only makes sense at creation time and
|
||||||
|
// is handled separately in the constructor.Also avoids overriding
|
||||||
|
// Path#insert().
|
||||||
if (props)
|
if (props)
|
||||||
this._set(props, { insert: true });
|
this._set(props, { insert: true });
|
||||||
return this;
|
return this;
|
||||||
|
@ -1658,10 +1661,12 @@ var Item = Base.extend(Callback, /** @lends Item# */{
|
||||||
* {@code Group, Layer, Path, CompoundPath, Shape, Raster, PlacedSymbol,
|
* {@code Group, Layer, Path, CompoundPath, Shape, Raster, PlacedSymbol,
|
||||||
* PointText}, etc.
|
* PointText}, etc.
|
||||||
* <b>options.fill:</b> {@code Boolean} – hit test the fill of items.
|
* <b>options.fill:</b> {@code Boolean} – hit test the fill of items.
|
||||||
* <b>options.stroke:</b> {@code Boolean} – hit test the curves of path
|
* <b>options.stroke:</b> {@code Boolean} – hit test the stroke of path
|
||||||
* items, taking into account stroke width.
|
* items, taking into account the setting of stroke color and width.
|
||||||
* <b>options.segment:</b> {@code Boolean} – hit test for
|
* <b>options.segments:</b> {@code Boolean} – hit test for
|
||||||
* {@link Segment#point} of {@link Path} items.
|
* {@link Segment#point} of {@link Path} items.
|
||||||
|
* <b>options.curves:</b> {@code Boolean} – hit test the curves of path
|
||||||
|
* items, without taking the stroke color or width into account.
|
||||||
* <b>options.handles:</b> {@code Boolean} – hit test for the handles
|
* <b>options.handles:</b> {@code Boolean} – hit test for the handles
|
||||||
* ({@link Segment#handleIn} / {@link Segment#handleOut}) of path segments.
|
* ({@link Segment#handleIn} / {@link Segment#handleOut}) of path segments.
|
||||||
* <b>options.ends:</b> {@code Boolean} – only hit test for the first or
|
* <b>options.ends:</b> {@code Boolean} – only hit test for the first or
|
||||||
|
|
|
@ -1756,13 +1756,17 @@ var Path = PathItem.extend(/** @lends Path# */{
|
||||||
strokePadding = tolerancePadding,
|
strokePadding = tolerancePadding,
|
||||||
join, cap, miterLimit,
|
join, cap, miterLimit,
|
||||||
area, loc, res,
|
area, loc, res,
|
||||||
hasStroke = options.stroke && style.hasStroke(),
|
hitStroke = options.stroke && style.hasStroke(),
|
||||||
hasFill = options.fill && style.hasFill(),
|
hitFill = options.fill && style.hasFill(),
|
||||||
radius = hasStroke ? style.getStrokeWidth() / 2
|
hitCurves = options.curves,
|
||||||
// Set radius to 0 so when we're hit-testing, the tolerance
|
radius = hitStroke
|
||||||
// is used for fill too, through stroke functionality.
|
? style.getStrokeWidth() / 2
|
||||||
: hasFill ? 0 : null;
|
// Set radius to 0 when we're hit-testing fills with
|
||||||
if (radius != null) {
|
// tolerance, to handle tolerance through stroke hit-test
|
||||||
|
// functionality. Also use 0 when hit-testing curves.
|
||||||
|
: hitFill && options.tolerance > 0 || hitCurves
|
||||||
|
? 0 : null;
|
||||||
|
if (radius !== null) {
|
||||||
if (radius > 0) {
|
if (radius > 0) {
|
||||||
join = style.getStrokeJoin();
|
join = style.getStrokeJoin();
|
||||||
cap = style.getStrokeCap();
|
cap = style.getStrokeCap();
|
||||||
|
@ -1858,7 +1862,7 @@ var Path = PathItem.extend(/** @lends Path# */{
|
||||||
return res;
|
return res;
|
||||||
}
|
}
|
||||||
// If we're querying for stroke, perform that before fill
|
// If we're querying for stroke, perform that before fill
|
||||||
if (radius != null) {
|
if (radius !== null) {
|
||||||
loc = this.getNearestLocation(point);
|
loc = this.getNearestLocation(point);
|
||||||
// Note that paths need at least two segments to have an actual
|
// Note that paths need at least two segments to have an actual
|
||||||
// stroke. But we still check for segments with the radius fallback
|
// stroke. But we still check for segments with the radius fallback
|
||||||
|
@ -1891,16 +1895,17 @@ var Path = PathItem.extend(/** @lends Path# */{
|
||||||
// Don't process loc yet, as we also need to query for stroke after fill
|
// Don't process loc yet, as we also need to query for stroke after fill
|
||||||
// in some cases. Simply skip fill query if we already have a matching
|
// in some cases. Simply skip fill query if we already have a matching
|
||||||
// stroke. If we have a loc and no stroke then it's a result for fill.
|
// stroke. If we have a loc and no stroke then it's a result for fill.
|
||||||
return !loc && hasFill && this._contains(point) || loc && !hasStroke
|
return !loc && hitFill && this._contains(point)
|
||||||
? new HitResult('fill', this)
|
|| loc && !hitStroke && !hitCurves
|
||||||
: loc
|
? new HitResult('fill', this)
|
||||||
? new HitResult('stroke', this, {
|
: loc
|
||||||
location: loc,
|
? new HitResult(hitStroke ? 'stroke' : 'curve', this, {
|
||||||
// It's fine performance wise to call getPoint() again
|
location: loc,
|
||||||
// since it was already called before.
|
// It's fine performance wise to call getPoint()
|
||||||
point: loc.getPoint()
|
// again since it was already called before.
|
||||||
})
|
point: loc.getPoint()
|
||||||
: null;
|
})
|
||||||
|
: null;
|
||||||
}
|
}
|
||||||
|
|
||||||
// TODO: intersects(item)
|
// TODO: intersects(item)
|
||||||
|
|
|
@ -272,10 +272,12 @@ var Project = PaperScopeItem.extend(/** @lends Project# */{
|
||||||
* {@code Group, Layer, Path, CompoundPath, Shape, Raster, PlacedSymbol,
|
* {@code Group, Layer, Path, CompoundPath, Shape, Raster, PlacedSymbol,
|
||||||
* PointText}, etc.
|
* PointText}, etc.
|
||||||
* <b>options.fill:</b> {@code Boolean} – hit test the fill of items.
|
* <b>options.fill:</b> {@code Boolean} – hit test the fill of items.
|
||||||
* <b>options.stroke:</b> {@code Boolean} – hit test the curves of path
|
* <b>options.stroke:</b> {@code Boolean} – hit test the stroke of path
|
||||||
* items, taking into account stroke width.
|
* items, taking into account the setting of stroke color and width.
|
||||||
* <b>options.segments:</b> {@code Boolean} – hit test for
|
* <b>options.segments:</b> {@code Boolean} – hit test for
|
||||||
* {@link Segment#point} of {@link Path} items.
|
* {@link Segment#point} of {@link Path} items.
|
||||||
|
* <b>options.curves:</b> {@code Boolean} – hit test the curves of path
|
||||||
|
* items, without taking the stroke color or width into account.
|
||||||
* <b>options.handles:</b> {@code Boolean} – hit test for the handles
|
* <b>options.handles:</b> {@code Boolean} – hit test for the handles
|
||||||
* ({@link Segment#handleIn} / {@link Segment#handleOut}) of path segments.
|
* ({@link Segment#handleIn} / {@link Segment#handleOut}) of path segments.
|
||||||
* <b>options.ends:</b> {@code Boolean} – only hit test for the first or
|
* <b>options.ends:</b> {@code Boolean} – only hit test for the first or
|
||||||
|
|
Loading…
Reference in a new issue