master
yutent 2024-03-08 10:58:59 +08:00
parent c714af4a11
commit d9eff8e338
5 changed files with 358 additions and 692 deletions

View File

@ -54,11 +54,9 @@ eve.on('snap.util.attr', function (val) {
})(-10)
eve.on('snap.util.equal', function (name, b) {
let A,
B,
a = String(this.attr(name) || ''),
el = this,
bplus = String(b).match(reAddon)
let a = String(this.attr(name) || '')
let bplus = String(b).match(reAddon)
if (bplus) {
eve.stop()
let unit = bplus[3] || '',

View File

@ -1,18 +1,10 @@
// Copyright (c) 2017 Adobe Systems Incorporated. All rights reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
/**
* {}
* @author yutent<yutent.io@gmail.com>
* @date 2024/03/08 10:20:25
*/
import eve from './eve.js'
import { Snap } from './svg.js'
import { uuid } from './utils.js'
let animations = {},
@ -127,74 +119,71 @@ let animations = {},
a.update()
}
requestID = len ? requestAnimFrame(frame) : false
},
/*\
* mina
[ method ]
**
* Generic animation of numbers
**
- a (number) start _slave_ number
- A (number) end _slave_ number
- b (number) start _master_ number (start time in general case)
- B (number) end _master_ number (end time in general case)
- get (function) getter of _master_ number (see @mina.time)
- set (function) setter of _slave_ number
- easing (function) #optional easing function, default is @mina.linear
= (object) animation descriptor
o {
o id (string) animation id,
o start (number) start _slave_ number,
o end (number) end _slave_ number,
o b (number) start _master_ number,
o s (number) animation status (0..1),
o dur (number) animation duration,
o spd (number) animation speed,
o get (function) getter of _master_ number (see @mina.time),
o set (function) setter of _slave_ number,
o easing (function) easing function, default is @mina.linear,
o status (function) status getter/setter,
o speed (function) speed getter/setter,
o duration (function) duration getter/setter,
o stop (function) animation stopper
o pause (function) pauses the animation
o resume (function) resumes the animation
o update (function) calles setter with the right value of the animation
o }
\*/
mina = function (a, A, b, B, get, set, easing) {
let anim = {
id: uuid('M'),
start: a,
end: A,
b: b,
s: 0,
dur: B - b,
spd: 1,
get: get,
set: set,
easing: easing || mina.linear,
status: sta,
speed: speed,
duration: duration,
stop: stopit,
pause: pause,
resume: resume,
update: update
}
animations[anim.id] = anim
let len = 0,
i
for (i in animations)
if (animations.hasOwnProperty(i)) {
len++
if (len == 2) {
break
}
}
len == 1 && frame()
return anim
}
/***
* Generic animation of numbers
**
* a (number) start _slave_ number
* A (number) end _slave_ number
* b (number) start _master_ number (start time in general case)
* B (number) end _master_ number (end time in general case)
* get (function) getter of _master_ number (see @mina.time)
* set (function) setter of _slave_ number
* easing (function) #optional easing function, default is @mina.linear
= (object) animation descriptor
{
id (string) animation id,
start (number) start _slave_ number,
end (number) end _slave_ number,
b (number) start _master_ number,
s (number) animation status (0..1),
dur (number) animation duration,
spd (number) animation speed,
get (function) getter of _master_ number (see @mina.time),
set (function) setter of _slave_ number,
easing (function) easing function, default is @mina.linear,
status (function) status getter/setter,
speed (function) speed getter/setter,
duration (function) duration getter/setter,
stop (function) animation stopper
pause (function) pauses the animation
resume (function) resumes the animation
update (function) calles setter with the right value of the animation
}
*/
export const mina = function (a, A, b, B, get, set, easing) {
let anim = {
id: uuid('M'),
start: a,
end: A,
b: b,
s: 0,
dur: B - b,
spd: 1,
get: get,
set: set,
easing: easing || mina.linear,
status: sta,
speed: speed,
duration: duration,
stop: stopit,
pause: pause,
resume: resume,
update: update
}
animations[anim.id] = anim
let len = 0,
i
for (i in animations)
if (animations.hasOwnProperty(i)) {
len++
if (len == 2) {
break
}
}
len == 1 && frame()
return anim
}
/*\
* mina.time
[ method ]

View File

@ -12,7 +12,7 @@
// See the License for the specific language governing permissions and
// limitations under the License.
import eve from './eve.js'
import { Snap, SnapElement, Paper } from './svg.js'
import { Snap, SnapElement } from './svg.js'
import { is } from './utils.js'
import { doc, win } from './lib/constants.js'
@ -169,287 +169,62 @@ let elproto = SnapElement.prototype,
}
drag = []
}
/*\
* SnapElement.click
[ method ]
**
* Adds a click event handler to the element
- handler (function) handler for the event
= (object) @SnapElement
\*/
/*\
* SnapElement.unclick
[ method ]
**
* Removes a click event handler from the element
- handler (function) handler for the event
= (object) @SnapElement
\*/
/*\
* SnapElement.dblclick
[ method ]
**
* Adds a double click event handler to the element
- handler (function) handler for the event
= (object) @SnapElement
\*/
/*\
* SnapElement.undblclick
[ method ]
**
* Removes a double click event handler from the element
- handler (function) handler for the event
= (object) @SnapElement
\*/
/*\
* SnapElement.mousedown
[ method ]
**
* Adds a mousedown event handler to the element
- handler (function) handler for the event
= (object) @SnapElement
\*/
/*\
* SnapElement.unmousedown
[ method ]
**
* Removes a mousedown event handler from the element
- handler (function) handler for the event
= (object) @SnapElement
\*/
/*\
* SnapElement.mousemove
[ method ]
**
* Adds a mousemove event handler to the element
- handler (function) handler for the event
= (object) @SnapElement
\*/
/*\
* SnapElement.unmousemove
[ method ]
**
* Removes a mousemove event handler from the element
- handler (function) handler for the event
= (object) @SnapElement
\*/
/*\
* SnapElement.mouseout
[ method ]
**
* Adds a mouseout event handler to the element
- handler (function) handler for the event
= (object) @SnapElement
\*/
/*\
* SnapElement.unmouseout
[ method ]
**
* Removes a mouseout event handler from the element
- handler (function) handler for the event
= (object) @SnapElement
\*/
/*\
* SnapElement.mouseover
[ method ]
**
* Adds a mouseover event handler to the element
- handler (function) handler for the event
= (object) @SnapElement
\*/
/*\
* SnapElement.unmouseover
[ method ]
**
* Removes a mouseover event handler from the element
- handler (function) handler for the event
= (object) @SnapElement
\*/
/*\
* SnapElement.mouseup
[ method ]
**
* Adds a mouseup event handler to the element
- handler (function) handler for the event
= (object) @SnapElement
\*/
/*\
* SnapElement.unmouseup
[ method ]
**
* Removes a mouseup event handler from the element
- handler (function) handler for the event
= (object) @SnapElement
\*/
/*\
* SnapElement.touchstart
[ method ]
**
* Adds a touchstart event handler to the element
- handler (function) handler for the event
= (object) @SnapElement
\*/
/*\
* SnapElement.untouchstart
[ method ]
**
* Removes a touchstart event handler from the element
- handler (function) handler for the event
= (object) @SnapElement
\*/
/*\
* SnapElement.touchmove
[ method ]
**
* Adds a touchmove event handler to the element
- handler (function) handler for the event
= (object) @SnapElement
\*/
/*\
* SnapElement.untouchmove
[ method ]
**
* Removes a touchmove event handler from the element
- handler (function) handler for the event
= (object) @SnapElement
\*/
/*\
* SnapElement.touchend
[ method ]
**
* Adds a touchend event handler to the element
- handler (function) handler for the event
= (object) @SnapElement
\*/
/*\
* SnapElement.untouchend
[ method ]
**
* Removes a touchend event handler from the element
- handler (function) handler for the event
= (object) @SnapElement
\*/
/*\
* SnapElement.touchcancel
[ method ]
**
* Adds a touchcancel event handler to the element
- handler (function) handler for the event
= (object) @SnapElement
\*/
/*\
* SnapElement.untouchcancel
[ method ]
**
* Removes a touchcancel event handler from the element
- handler (function) handler for the event
= (object) @SnapElement
\*/
for (let i = events.length; i--; ) {
;(function (eventName) {
Snap[eventName] = elproto[eventName] = function (fn, scope) {
if (is(fn, 'function')) {
this.events = this.events || []
this.events.push({
name: eventName,
f: fn,
unbind: addEvent(this.node || document, eventName, fn, scope || this)
})
} else {
for (let i = 0, ii = this.events.length; i < ii; i++)
if (this.events[i].name == eventName) {
try {
this.events[i].f.call(this)
} catch (e) {}
}
}
return this
}
Snap['un' + eventName] = elproto['un' + eventName] = function (fn) {
let events = this.events || [],
l = events.length
while (l--)
if (events[l].name == eventName && (events[l].f == fn || !fn)) {
events[l].unbind()
events.splice(l, 1)
!events.length && delete this.events
return this
let eventName = events[i]
Snap[eventName] = elproto[eventName] = function (fn, scope) {
if (is(fn, 'function')) {
this.events = this.events || []
this.events.push({
name: eventName,
f: fn,
unbind: addEvent(this.node || document, eventName, fn, scope || this)
})
} else {
for (let i = 0, ii = this.events.length; i < ii; i++)
if (this.events[i].name == eventName) {
try {
this.events[i].f.call(this)
} catch (e) {}
}
return this
}
})(events[i])
return this
}
Snap['un' + eventName] = elproto['un' + eventName] = function (fn) {
let events = this.events || [],
l = events.length
while (l--)
if (events[l].name == eventName && (events[l].f == fn || !fn)) {
events[l].unbind()
events.splice(l, 1)
!events.length && delete this.events
return this
}
return this
}
}
/*\
* SnapElement.hover
[ method ]
**
* Adds hover event handlers to the element
- f_in (function) handler for hover in
- f_out (function) handler for hover out
- icontext (object) #optional context for hover in handler
- ocontext (object) #optional context for hover out handler
= (object) @SnapElement
\*/
/***
* Adds hover event handlers to the element
* f_in (function) handler for hover in
* f_out (function) handler for hover out
* icontext (object) #optional context for hover in handler
* ocontext (object) #optional context for hover out handler
*/
elproto.hover = function (f_in, f_out, scope_in, scope_out) {
return this.mouseover(f_in, scope_in).mouseout(f_out, scope_out || scope_in)
}
/*\
* SnapElement.unhover
[ method ]
**
* Removes hover event handlers from the element
- f_in (function) handler for hover in
- f_out (function) handler for hover out
= (object) @SnapElement
\*/
/**
* Removes hover event handlers from the element
* f_in (function) handler for hover in
* f_out (function) handler for hover out
*/
elproto.unhover = function (f_in, f_out) {
return this.unmouseover(f_in).unmouseout(f_out)
}
let draggable = []
// SIERRA unclear what _context_ refers to for starting, ending, moving the drag gesture.
// SIERRA SnapElement.drag(): _x position of the mouse_: Where are the x/y values offset from?
// SIERRA SnapElement.drag(): much of this member's doc appears to be duplicated for some reason.
// SIERRA Unclear about this sentence: _Additionally following drag events will be triggered: drag.start.<id> on start, drag.end.<id> on end and drag.move.<id> on every move._ Is there a global _drag_ object to which you can assign handlers keyed by an element's id?
/*\
* SnapElement.drag
[ method ]
**
* Adds event handlers for an element's drag gesture
**
- onmove (function) handler for moving
- onstart (function) handler for drag start
- onend (function) handler for drag end
- mcontext (object) #optional context for moving handler
- scontext (object) #optional context for drag start handler
- econtext (object) #optional context for drag end handler
* Additionaly following `drag` events are triggered: `drag.start.<id>` on start,
* `drag.end.<id>` on end and `drag.move.<id>` on every move. When element is dragged over another element
* `drag.over.<id>` fires as well.
*
* Start event and start handler are called in specified context or in context of the element with following parameters:
o x (number) x position of the mouse
o y (number) y position of the mouse
o event (object) DOM event object
* Move event and move handler are called in specified context or in context of the element with following parameters:
o dx (number) shift by x from the start point
o dy (number) shift by y from the start point
o x (number) x position of the mouse
o y (number) y position of the mouse
o event (object) DOM event object
* End event and end handler are called in specified context or in context of the element with following parameters:
o event (object) DOM event object
= (object) @SnapElement
\*/
elproto.drag = function (
onmove,
onstart,
@ -498,22 +273,7 @@ elproto.drag = function (
el.mousedown(init)
return el
}
/*
* SnapElement.onDragOver
[ method ]
**
* Shortcut to assign event handler for `drag.over.<id>` event, where `id` is the element's `id` (see @SnapElement.id)
- f (function) handler for event, first argument would be the element you are dragging over
\*/
// elproto.onDragOver = function (f) {
// f ? eve.on("snap.drag.over." + this.id, f) : eve.unbind("snap.drag.over." + this.id);
// };
/*\
* SnapElement.undrag
[ method ]
**
* Removes all drag event handlers from the given element
\*/
elproto.undrag = function () {
let i = draggable.length
while (i--)

View File

@ -14,27 +14,19 @@ let proto = Paper.prototype
// gradients
;(function () {
// gradients' helpers
/*\
* SnapElement.stops
[ method ]
**
* Only for gradients!
* Returns array of gradient stops elements.
= (array) the stops array.
\*/
/**
* Only for gradients!
* Returns array of gradient stops elements.
*/
function Gstops() {
return this.selectAll('stop')
}
/*\
* SnapElement.addStop
[ method ]
**
* Only for gradients!
* Adds another stop to the gradient.
- color (string) stops color
- offset (number) stops offset 0..100
= (object) gradient element
\*/
/**
* Only for gradients!
* Adds another stop to the gradient.
* color (string) stops color
* offset (number) stops offset 0..100
*/
function GaddStop(color, offset) {
let stop = $('stop'),
attr = {
@ -75,17 +67,14 @@ let proto = Paper.prototype
return Snap._.box(cx - r, cy - r, r * 2, r * 2)
}
}
/*\
* SnapElement.setStops
[ method ]
**
* Only for gradients!
* Updates stops of the gradient based on passed gradient descriptor. See @Ppaer.gradient
- str (string) gradient descriptor part after `()`.
= (object) gradient element
| let g = paper.gradient("l(0, 0, 1, 1)#000-#f00-#fff");
| g.setStops("#fff-#000-#f00-#fc0");
\*/
/**
* Only for gradients!
* Updates stops of the gradient based on passed gradient descriptor. See @Ppaer.gradient
- str (string) gradient descriptor part after `()`.
= (object) gradient element
| let g = paper.gradient("l(0, 0, 1, 1)#000-#f00-#fff");
| g.setStops("#fff-#000-#f00-#fc0");
*/
function GsetStops(str) {
let grad = str,
stops = this.stops()

View File

@ -1,29 +1,21 @@
// Copyright (c) 2013 Adobe Systems Incorporated. All rights reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import { Snap, SnapElement, Paper, Fragment, unit2px } from './svg.js'
/**
* {}
* @author yutent<yutent.io@gmail.com>
* @date 2024/03/08 10:57:37
*/
import { Snap, SnapElement, unit2px } from './svg.js'
import { is, clone, cacher } from './utils.js'
let elproto = SnapElement.prototype,
has = 'hasOwnProperty',
p2s = /,?([a-z]),?/gi,
toFloat = parseFloat,
math = Math,
PI = math.PI,
mmin = math.min,
mmax = math.max,
pow = math.pow,
abs = math.abs
PI = Math.PI,
mmin = Math.min,
mmax = Math.max,
pow = Math.pow,
abs = Math.abs
function paths(ps) {
let p = (paths.ps = paths.ps || {})
if (p[ps]) {
@ -34,11 +26,12 @@ function paths(ps) {
}
}
setTimeout(function () {
for (let key in p)
for (let key in p) {
if (p[has](key) && key != ps) {
p[key].sleep--
!p[key].sleep && delete p[key]
}
}
})
return p[ps]
}
@ -63,9 +56,9 @@ function box(x, y, width, height) {
y2: y + height,
cx: x + width / 2,
cy: y + height / 2,
r1: math.min(width, height) / 2,
r2: math.max(width, height) / 2,
r0: math.sqrt(width * width + height * height) / 2,
r1: Math.min(width, height) / 2,
r2: Math.max(width, height) / 2,
r0: Math.sqrt(width * width + height * height) / 2,
path: rectPath(x, y, width, height),
vb: [x, y, width, height].join(' ')
}
@ -221,7 +214,7 @@ function findDotsAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t) {
ay = t1 * p1y + t * c1y,
cx = t1 * c2x + t * p2x,
cy = t1 * c2y + t * p2y,
alpha = 90 - (math.atan2(mx - nx, my - ny) * 180) / PI
alpha = 90 - (Math.atan2(mx - nx, my - ny) * 180) / PI
// (mx > nx || my < ny) && (alpha += 180);
return {
x: x,
@ -297,7 +290,7 @@ function bezlen(x1, y1, x2, y2, x3, y3, x4, y4, z) {
xbase = base3(ct, x1, x2, x3, x4),
ybase = base3(ct, y1, y2, y3, y4),
comb = xbase * xbase + ybase * ybase
sum += Cvalues[i] * math.sqrt(comb)
sum += Cvalues[i] * Math.sqrt(comb)
}
return z2 * sum
}
@ -863,15 +856,15 @@ function a2c(
y2,
recursive
) {
// for more information of where this math came from visit:
// for more information of where this Math came from visit:
// http://www.w3.org/TR/SVG11/implnote.html#ArcImplementationNotes
let _120 = (PI * 120) / 180,
rad = (PI / 180) * (+angle || 0),
res = [],
xy,
rotate = cacher(function (x, y, rad) {
let X = x * math.cos(rad) - y * math.sin(rad),
Y = x * math.sin(rad) + y * math.cos(rad)
let X = x * Math.cos(rad) - y * Math.sin(rad),
Y = x * Math.sin(rad) + y * Math.cos(rad)
return { x: X, y: Y }
})
if (!rx || !ry) {
@ -884,13 +877,13 @@ function a2c(
xy = rotate(x2, y2, -rad)
x2 = xy.x
y2 = xy.y
let cos = math.cos((PI / 180) * angle),
sin = math.sin((PI / 180) * angle),
let cos = Math.cos((PI / 180) * angle),
sin = Math.sin((PI / 180) * angle),
x = (x1 - x2) / 2,
y = (y1 - y2) / 2
let h = (x * x) / (rx * rx) + (y * y) / (ry * ry)
if (h > 1) {
h = math.sqrt(h)
h = Math.sqrt(h)
rx = h * rx
ry = h * ry
}
@ -898,7 +891,7 @@ function a2c(
ry2 = ry * ry,
k =
(large_arc_flag == sweep_flag ? -1 : 1) *
math.sqrt(
Math.sqrt(
abs(
(rx2 * ry2 - rx2 * y * y - ry2 * x * x) /
(rx2 * y * y + ry2 * x * x)
@ -906,8 +899,8 @@ function a2c(
),
cx = (k * rx * y) / ry + (x1 + x2) / 2,
cy = (k * -ry * x) / rx + (y1 + y2) / 2,
f1 = math.asin(((y1 - cy) / ry).toFixed(9)),
f2 = math.asin(((y2 - cy) / ry).toFixed(9))
f1 = Math.asin(((y1 - cy) / ry).toFixed(9)),
f2 = Math.asin(((y2 - cy) / ry).toFixed(9))
f1 = x1 < cx ? PI - f1 : f1
f2 = x2 < cx ? PI - f2 : f2
@ -931,8 +924,8 @@ function a2c(
x2old = x2,
y2old = y2
f2 = f1 + _120 * (sweep_flag && f2 > f1 ? 1 : -1)
x2 = cx + rx * math.cos(f2)
y2 = cy + ry * math.sin(f2)
x2 = cx + rx * Math.cos(f2)
y2 = cy + ry * Math.sin(f2)
res = a2c(x2, y2, rx, ry, angle, 0, sweep_flag, x2old, y2old, [
f2,
f2old,
@ -941,11 +934,11 @@ function a2c(
])
}
df = f2 - f1
let c1 = math.cos(f1),
s1 = math.sin(f1),
c2 = math.cos(f2),
s2 = math.sin(f2),
t = math.tan(df / 4),
let c1 = Math.cos(f1),
s1 = Math.sin(f1),
c2 = Math.cos(f2),
s2 = Math.sin(f2),
t = Math.tan(df / 4),
hx = (4 / 3) * rx * t,
hy = (4 / 3) * ry * t,
m1 = [x1, y1],
@ -1020,7 +1013,7 @@ function curveDim(x0, y0, x1, y1, x2, y2, x3, y3) {
continue
}
b2ac = b * b - 4 * c * a
sqrtb2ac = math.sqrt(b2ac)
sqrtb2ac = Math.sqrt(b2ac)
if (b2ac < 0) {
continue
}
@ -1199,10 +1192,10 @@ function path2curve(path, path2) {
seg2len = p2 && seg2.length
attrs.x = seg[seglen - 2]
attrs.y = seg[seglen - 1]
attrs.bx = toFloat(seg[seglen - 4]) || attrs.x
attrs.by = toFloat(seg[seglen - 3]) || attrs.y
attrs2.bx = p2 && (toFloat(seg2[seg2len - 4]) || attrs2.x)
attrs2.by = p2 && (toFloat(seg2[seg2len - 3]) || attrs2.y)
attrs.bx = +seg[seglen - 4] || attrs.x
attrs.by = +seg[seglen - 3] || attrs.y
attrs2.bx = p2 && (+seg2[seg2len - 4] || attrs2.x)
attrs2.by = p2 && (+seg2[seg2len - 3] || attrs2.y)
attrs2.x = p2 && seg2[seg2len - 2]
attrs2.y = p2 && seg2[seg2len - 1]
}
@ -1272,46 +1265,36 @@ function catmullRom2bezier(crp, z) {
// export
Snap.path = paths
/*\
* Snap.path.getTotalLength
[ method ]
**
* Returns the length of the given path in pixels
**
- path (string) SVG path string
**
= (number) length
\*/
/**
* Returns the length of the given path in pixels
**
* path (string) SVG path string
**
*/
Snap.path.getTotalLength = getTotalLength
/*\
* Snap.path.getPointAtLength
[ method ]
**
* Returns the coordinates of the point located at the given length along the given path
**
- path (string) SVG path string
- length (number) length, in pixels, from the start of the path, excluding non-rendering jumps
**
= (object) representation of the point:
o {
o x: (number) x coordinate,
o y: (number) y coordinate,
o alpha: (number) angle of derivative
o }
\*/
/**
* Returns the coordinates of the point located at the given length along the given path
**
* path (string) SVG path string
* length (number) length, in pixels, from the start of the path, excluding non-rendering jumps
**
= (object) representation of the point:
{
x: (number) x coordinate,
y: (number) y coordinate,
alpha: (number) angle of derivative
}
*/
Snap.path.getPointAtLength = getPointAtLength
/*\
* Snap.path.getSubpath
[ method ]
**
* Returns the subpath of a given path between given start and end lengths
**
- path (string) SVG path string
- from (number) length, in pixels, from the start of the path to the start of the segment
- to (number) length, in pixels, from the start of the path to the end of the segment
**
= (string) path string definition for the segment
\*/
/**
* Returns the subpath of a given path between given start and end lengths
**
- path (string) SVG path string
- from (number) length, in pixels, from the start of the path to the start of the segment
- to (number) length, in pixels, from the start of the path to the end of the segment
**
= (string) path string definition for the segment
*/
Snap.path.getSubpath = function (path, from, to) {
if (this.getTotalLength(path) - to < 1e-6) {
return getSubpathsAtLength(path, from).end
@ -1319,133 +1302,113 @@ Snap.path.getSubpath = function (path, from, to) {
let a = getSubpathsAtLength(path, to, 1)
return from ? getSubpathsAtLength(a, from).end : a
}
/*\
* SnapElement.getTotalLength
[ method ]
**
* Returns the length of the path in pixels (only works for `path` elements)
= (number) length
\*/
/**
* Returns the length of the path in pixels (only works for `path` elements)
= (number) length
*/
elproto.getTotalLength = function () {
if (this.node.getTotalLength) {
return this.node.getTotalLength()
}
}
// SIERRA SnapElement.getPointAtLength()/SnapElement.getTotalLength(): If a <path> is broken into different segments, is the jump distance to the new coordinates set by the _M_ or _m_ commands calculated as part of the path's total length?
/*\
* SnapElement.getPointAtLength
[ method ]
**
* Returns coordinates of the point located at the given length on the given path (only works for `path` elements)
**
- length (number) length, in pixels, from the start of the path, excluding non-rendering jumps
**
= (object) representation of the point:
o {
o x: (number) x coordinate,
o y: (number) y coordinate,
o alpha: (number) angle of derivative
o }
\*/
/**
* Returns coordinates of the point located at the given length on the given path (only works for `path` elements)
**
- length (number) length, in pixels, from the start of the path, excluding non-rendering jumps
**
= (object) representation of the point:
{
x: (number) x coordinate,
y: (number) y coordinate,
alpha: (number) angle of derivative
}
*/
elproto.getPointAtLength = function (length) {
return getPointAtLength(this.attr('d'), length)
}
// SIERRA SnapElement.getSubpath(): Similar to the problem for SnapElement.getPointAtLength(). Unclear how this would work for a segmented path. Overall, the concept of _subpath_ and what I'm calling a _segment_ (series of non-_M_ or _Z_ commands) is unclear.
/*\
* SnapElement.getSubpath
[ method ]
**
* Returns subpath of a given element from given start and end lengths (only works for `path` elements)
**
- from (number) length, in pixels, from the start of the path to the start of the segment
- to (number) length, in pixels, from the start of the path to the end of the segment
**
= (string) path string definition for the segment
\*/
/**
* Returns subpath of a given element from given start and end lengths (only works for `path` elements)
**
- from (number) length, in pixels, from the start of the path to the start of the segment
- to (number) length, in pixels, from the start of the path to the end of the segment
**
= (string) path string definition for the segment
*/
elproto.getSubpath = function (from, to) {
return Snap.path.getSubpath(this.attr('d'), from, to)
}
Snap._.box = box
/*\
* Snap.path.findDotsAtSegment
[ method ]
**
* Utility method
**
* Finds dot coordinates on the given cubic beziér curve at the given t
- p1x (number) x of the first point of the curve
- p1y (number) y of the first point of the curve
- c1x (number) x of the first anchor of the curve
- c1y (number) y of the first anchor of the curve
- c2x (number) x of the second anchor of the curve
- c2y (number) y of the second anchor of the curve
- p2x (number) x of the second point of the curve
- p2y (number) y of the second point of the curve
- t (number) position on the curve (0..1)
= (object) point information in format:
o {
o x: (number) x coordinate of the point,
o y: (number) y coordinate of the point,
o m: {
o x: (number) x coordinate of the left anchor,
o y: (number) y coordinate of the left anchor
o },
o n: {
o x: (number) x coordinate of the right anchor,
o y: (number) y coordinate of the right anchor
o },
o start: {
o x: (number) x coordinate of the start of the curve,
o y: (number) y coordinate of the start of the curve
o },
o end: {
o x: (number) x coordinate of the end of the curve,
o y: (number) y coordinate of the end of the curve
o },
o alpha: (number) angle of the curve derivative at the point
o }
\*/
/**
* Utility method
**
* Finds dot coordinates on the given cubic beziér curve at the given t
- p1x (number) x of the first point of the curve
- p1y (number) y of the first point of the curve
- c1x (number) x of the first anchor of the curve
- c1y (number) y of the first anchor of the curve
- c2x (number) x of the second anchor of the curve
- c2y (number) y of the second anchor of the curve
- p2x (number) x of the second point of the curve
- p2y (number) y of the second point of the curve
- t (number) position on the curve (0..1)
= (object) point information in format:
{
x: (number) x coordinate of the point,
y: (number) y coordinate of the point,
m: {
x: (number) x coordinate of the left anchor,
y: (number) y coordinate of the left anchor
},
n: {
x: (number) x coordinate of the right anchor,
y: (number) y coordinate of the right anchor
},
start: {
x: (number) x coordinate of the start of the curve,
y: (number) y coordinate of the start of the curve
},
end: {
x: (number) x coordinate of the end of the curve,
y: (number) y coordinate of the end of the curve
},
alpha: (number) angle of the curve derivative at the point
}
*/
Snap.path.findDotsAtSegment = findDotsAtSegment
/*\
* Snap.path.bezierBBox
[ method ]
**
* Utility method
**
* Returns the bounding box of a given cubic beziér curve
- p1x (number) x of the first point of the curve
- p1y (number) y of the first point of the curve
- c1x (number) x of the first anchor of the curve
- c1y (number) y of the first anchor of the curve
- c2x (number) x of the second anchor of the curve
- c2y (number) y of the second anchor of the curve
- p2x (number) x of the second point of the curve
- p2y (number) y of the second point of the curve
* or
- bez (array) array of six points for beziér curve
= (object) bounding box
o {
o x: (number) x coordinate of the left top point of the box,
o y: (number) y coordinate of the left top point of the box,
o x2: (number) x coordinate of the right bottom point of the box,
o y2: (number) y coordinate of the right bottom point of the box,
o width: (number) width of the box,
o height: (number) height of the box
o }
\*/
/**
**
* Returns the bounding box of a given cubic beziér curve
- p1x (number) x of the first point of the curve
- p1y (number) y of the first point of the curve
- c1x (number) x of the first anchor of the curve
- c1y (number) y of the first anchor of the curve
- c2x (number) x of the second anchor of the curve
- c2y (number) y of the second anchor of the curve
- p2x (number) x of the second point of the curve
- p2y (number) y of the second point of the curve
* or
- bez (array) array of six points for beziér curve
= (object) bounding box
o {
o x: (number) x coordinate of the left top point of the box,
o y: (number) y coordinate of the left top point of the box,
o x2: (number) x coordinate of the right bottom point of the box,
o y2: (number) y coordinate of the right bottom point of the box,
o width: (number) width of the box,
o height: (number) height of the box
o }
*/
Snap.path.bezierBBox = bezierBBox
/*\
* Snap.path.isPointInsideBBox
[ method ]
**
* Utility method
**
* Returns `true` if given point is inside bounding box
- bbox (string) bounding box
- x (string) x coordinate of the point
- y (string) y coordinate of the point
= (boolean) `true` if point is inside
\*/
/**
**
* Returns `true` if given point is inside bounding box
- bbox (string) bounding box
- x (string) x coordinate of the point
- y (string) y coordinate of the point
= (boolean) `true` if point is inside
*/
Snap.path.isPointInsideBBox = isPointInsideBBox
Snap.closest = function (x, y, X, Y) {
let r = 100,
@ -1506,108 +1469,75 @@ Snap.closest = function (x, y, X, Y) {
= (boolean) `true` if bounding boxes intersect
\*/
Snap.path.isBBoxIntersect = isBBoxIntersect
/*\
* Snap.path.intersection
[ method ]
**
* Utility method
**
* Finds intersections of two paths
- path1 (string) path string
- path2 (string) path string
= (array) dots of intersection
o [
o {
o x: (number) x coordinate of the point,
o y: (number) y coordinate of the point,
o t1: (number) t value for segment of path1,
o t2: (number) t value for segment of path2,
o segment1: (number) order number for segment of path1,
o segment2: (number) order number for segment of path2,
o bez1: (array) eight coordinates representing beziér curve for the segment of path1,
o bez2: (array) eight coordinates representing beziér curve for the segment of path2
o }
o ]
\*/
/**
* Finds intersections of two paths
- path1 (string) path string
- path2 (string) path string
= (array) dots of intersection
o [
o {
o x: (number) x coordinate of the point,
o y: (number) y coordinate of the point,
o t1: (number) t value for segment of path1,
o t2: (number) t value for segment of path2,
o segment1: (number) order number for segment of path1,
o segment2: (number) order number for segment of path2,
o bez1: (array) eight coordinates representing beziér curve for the segment of path1,
o bez2: (array) eight coordinates representing beziér curve for the segment of path2
o }
o ]
*/
Snap.path.intersection = pathIntersection
Snap.path.intersectionNumber = pathIntersectionNumber
/*\
* Snap.path.isPointInside
[ method ]
**
* Utility method
**
* Returns `true` if given point is inside a given closed path.
*
* Note: fill mode doesnt affect the result of this method.
- path (string) path string
- x (number) x of the point
- y (number) y of the point
= (boolean) `true` if point is inside the path
\*/
/**
* Returns `true` if given point is inside a given closed path.
*
* Note: fill mode doesnt affect the result of this method.
- path (string) path string
- x (number) x of the point
- y (number) y of the point
= (boolean) `true` if point is inside the path
*/
Snap.path.isPointInside = isPointInsidePath
/*\
* Snap.path.getBBox
[ method ]
**
* Utility method
**
* Returns the bounding box of a given path
- path (string) path string
= (object) bounding box
o {
o x: (number) x coordinate of the left top point of the box,
o y: (number) y coordinate of the left top point of the box,
o x2: (number) x coordinate of the right bottom point of the box,
o y2: (number) y coordinate of the right bottom point of the box,
o width: (number) width of the box,
o height: (number) height of the box
o }
\*/
/**
* Returns the bounding box of a given path
- path (string) path string
= (object) bounding box
o {
o x: (number) x coordinate of the left top point of the box,
o y: (number) y coordinate of the left top point of the box,
o x2: (number) x coordinate of the right bottom point of the box,
o y2: (number) y coordinate of the right bottom point of the box,
o width: (number) width of the box,
o height: (number) height of the box
o }
*/
Snap.path.getBBox = pathBBox
Snap.path.get = getPath
/*\
* Snap.path.toRelative
[ method ]
**
* Utility method
**
* Converts path coordinates into relative values
- path (string) path string
= (array) path string
\*/
/**
* Converts path coordinates into relative values
- path (string) path string
= (array) path string
*/
Snap.path.toRelative = pathToRelative
/*\
* Snap.path.toAbsolute
[ method ]
**
* Utility method
**
* Converts path coordinates into absolute values
- path (string) path string
= (array) path string
\*/
/**
* Converts path coordinates into absolute values
- path (string) path string
= (array) path string
*/
Snap.path.toAbsolute = pathToAbsolute
/*\
* Snap.path.toCubic
[ method ]
**
* Utility method
**
* Converts path to a new path where all segments are cubic beziér curves
- pathString (string|array) path string or array of segments
= (array) array of segments
\*/
/**
* Converts path to a new path where all segments are cubic beziér curves
- pathString (string|array) path string or array of segments
= (array) array of segments
*/
Snap.path.toCubic = path2curve
/*\
* Snap.path.map
[ method ]
**
* Transform the path string with the given matrix
- path (string) path string
- matrix (object) see @Matrix
= (string) transformed path string
\*/
/**
* Transform the path string with the given matrix
- path (string) path string
- matrix (object) see @Matrix
= (string) transformed path string
*/
Snap.path.map = mapPath
Snap.path.toString = toString
Snap.path.clone = pathClone