diff options
Diffstat (limited to 'playgrounds')
| -rw-r--r-- | playgrounds/matrix/drag.js | 79 | ||||
| -rw-r--r-- | playgrounds/matrix/matrix.html | 47 | ||||
| -rw-r--r-- | playgrounds/matrix/matrix.js | 41 | ||||
| -rw-r--r-- | playgrounds/playground.css | 43 | ||||
| -rw-r--r-- | playgrounds/transforms/transforms.html | 15 | ||||
| -rw-r--r-- | playgrounds/transforms/transforms.js | 54 |
6 files changed, 213 insertions, 66 deletions
diff --git a/playgrounds/matrix/drag.js b/playgrounds/matrix/drag.js new file mode 100644 index 0000000..636ae30 --- /dev/null +++ b/playgrounds/matrix/drag.js @@ -0,0 +1,79 @@ + +function reactToDrag (element, onDrag, beforeDrag) { + + let xStart, yStart + + let startDrag = event=> { + + // Avoid the default events + event.preventDefault() + + // Store the position where the drag started + xStart = event.pageX + yStart = event.pageY + + // Fire the start drag event + if (beforeDrag) { + var {x, y} = parent.point(event.pageX, event.pageY) + beforeDrag(event, x, y) + } + + // Register events to react to dragging + SVG.on(window, 'mousemove.drag', reactDrag) + SVG.on(window, 'touchmove.drag', reactDrag) + + // Register the events required to finish dragging + SVG.on(window, 'mouseup.drag', stopDrag) + SVG.on(window, 'touchend.drag', stopDrag) + } + + let reactDrag = event=> { + + // Convert screen coordinates to svg coordinates and use them + var {x, y} = parent.point(event.pageX, event.pageY) + if (onDrag) + onDrag(event, x, y) + } + + let stopDrag = event=> { + SVG.off(window, 'mousemove.drag') + SVG.off(window, 'touchmove.drag') + SVG.off(window, 'mouseup.drag') + SVG.off(window, 'touchend.drag') + } + + // Bind the drag tracker to this element directly + let parent = element.doc() + let point = new SVG.Point() + element.mousedown(startDrag).touchstart(startDrag) +} + +SVG.extend(SVG.Element, { + draggable: function (after) { + + let sx, sy + + reactToDrag(this, (e, x, y)=> { + + let matrix = this.transform + this.transform({ + origin: [sx, sy], + position: [x, y], + }) + + if (after) { + after(this, x, y) + } + + }, (e, x, y)=> { + + var toAbsolute = this.transform().inverse() + var p = new SVG.Point(x, y).transform(toAbsolute) + sx = p.x + sy = p.y + + }) + + return this + }, +}) diff --git a/playgrounds/matrix/matrix.html b/playgrounds/matrix/matrix.html new file mode 100644 index 0000000..cd34b7d --- /dev/null +++ b/playgrounds/matrix/matrix.html @@ -0,0 +1,47 @@ + +<!DOCTYPE html> +<html> + + <head> + <meta charset="utf-8"> + <title>SVG Playground</title> + <link rel="stylesheet" href="../playground.css"> + </head> + + <body> + + <h1>SVG Transformations</h1> + + <p> + This playground tests the <code>compose/decompose</code> functionality in + svg matrix, as well as the draggable code and the transformations. + </p> + + <svg viewBox="-200 -200 400 400"> + + <g id="tester"> + <rect class="green" width=50 height=50 /> + <line x2=50 stroke=black stroke-width=1 /> + </g> + + <g id="guess"> + <rect class="dark-pink" width=50 height=50 opacity=0.5 /> + <line x2=50 stroke=black stroke-width=1 /> + </g> + <g id="true"> + <rect class="pink" width=50 height=50 opacity=0.5 /> + <line x2=50 stroke=black stroke-width=1 /> + </g> + <ellipse id="or" class="dark-pink" rx=5 ry=5 /> + <ellipse id="b1" class="pink" cx="50" rx=5 ry=5 /> + <ellipse id="b2" class="green" cy="50" rx=5 ry=5 /> + + </svg> + + </body> + + <script src="../../dist/svg.js" charset="utf-8"></script> + <script src="drag.js" charset="utf-8"></script> + <script src="matrix.js" charset="utf-8"></script> + +</html> diff --git a/playgrounds/matrix/matrix.js b/playgrounds/matrix/matrix.js new file mode 100644 index 0000000..33e21d1 --- /dev/null +++ b/playgrounds/matrix/matrix.js @@ -0,0 +1,41 @@ + +function print (mat) { + let {a, b, c, d} = mat + console.log(` + a: ${a.toFixed(2)} + b: ${b.toFixed(2)} + c: ${c.toFixed(2)} + d: ${d.toFixed(2)} + `) +} + +function moveit () { + + let {cx: x0, cy: y0} = or.rbox(svg) + let {cx: x1, cy: y1} = b1.rbox(svg) + let {cx: x2, cy: y2} = b2.rbox(svg) + + let m = new SVG.Matrix( + (x1 - x0) / 50, (y1 - y0) / 50, (x2 - x0) / 50, (y2 - y0) / 50, x0, y0) + let com = m.decompose() + let g = new SVG.Matrix().compose(com) + + // Transform both of the items + target.transform(m) + mover.transform(g) + + console.log(com); + print(m) + print(g) +} + +// Declare the two points +let svg = SVG('svg') +var or = SVG("#or").draggable(moveit) +var b1 = SVG("#b1").draggable(moveit) +var b2 = SVG("#b2").draggable(moveit) + +// Declare the squares +let target = SVG("#true") +let mover = SVG("#guess") +let tester = SVG("#tester") diff --git a/playgrounds/playground.css b/playgrounds/playground.css index 1808d6a..71fabed 100644 --- a/playgrounds/playground.css +++ b/playgrounds/playground.css @@ -1,24 +1,53 @@ +* { + box-sizing: border-box; +} + html { background-color : #f5f6f7; - text-align: center; + /* text-align: center; */ +} + +body { + margin: 0; + width: 100vw; + height: 99vh; + grid-gap: 30px; + display: inline-grid; + align-items: center; + grid-template-columns: 10vw 40vw auto 10vw; + grid-template-rows: 0 10vw auto 0; } h1 { + text-align: right; + border-right: solid 3px #f06; + padding-right: 12px; color: #f06; - font-size: 6vh; - margin: 4vh; + font-size: 52px; + font-family: Helvetica; + grid-row: 2; + grid-column: 2; + line-height: 1.8em; +} + +p { + padding-right: 50px; + color: #444; + font-size: 18px; font-family: Helvetica; + grid-row: 2; + grid-column: 3; } svg { - width: 70vw; - height: 80vh; + height: 100%; + width: 100%; + grid-row: 3; + grid-column: 2/4; background-color: white; - position: fixed; border-radius: 20px; border: #f065 1px solid; - left: 15vw; } .pink { diff --git a/playgrounds/transforms/transforms.html b/playgrounds/transforms/transforms.html index d206d06..ac60f14 100644 --- a/playgrounds/transforms/transforms.html +++ b/playgrounds/transforms/transforms.html @@ -12,19 +12,12 @@ <h1>SVG JS Playground</h1> - <svg viewBox="0 0 2000 2000"> + <svg viewBox="-200 -200 400 400"> - <!-- <rect id="old" x=200 y=400 width=200 height=400 class="green"/> + <rect id="old" x=200 y=400 width=200 height=400 class="green"/> <rect id="new" x=200 y=400 width=200 height=400 class="pink"/> - <ellipse id="new" cx=800 cy=500 rx=10 ry=10 class="dark-pink"/> --> - <!-- <ellipse cx=0 cy=0 rx=3 ry=3 /> - <ellipse cx=100 cy=0 rx=3 ry=3 /> - <ellipse cx=0 cy=100 rx=3 ry=3 /> - <ellipse cx=100 cy=100 rx=3 ry=3 /> - <ellipse fill=red cx=0 cy=0 rx=3 ry=3 /> - <ellipse fill=red cx=100 cy=0 rx=3 ry=3 /> - <ellipse fill=red cx=0 cy=100 rx=3 ry=3 /> --> - <!-- <ellipse fill=red cx=100 cy=100 rx=3 ry=3 /> --> + <ellipse id="new" cx=800 cy=500 rx=10 ry=10 class="dark-pink"/> + </svg> </body> diff --git a/playgrounds/transforms/transforms.js b/playgrounds/transforms/transforms.js index 76045a3..b27e1c3 100644 --- a/playgrounds/transforms/transforms.js +++ b/playgrounds/transforms/transforms.js @@ -1,51 +1,9 @@ -// let mover = SVG.select("#new")[0] -// mover.transform({ -// // position: [800, 500], -// // origin: [200, 400], -// // skew: [20, 0], -// // rotate: 30, -// }) - -// var draw = SVG.select('svg')[0] -// var rect = draw.rect(100, 100) -// .transform({ -// // rotate: -10, -// translate: [-50, -50], -// // scale: 2 -// }).opacity(0.3) -// -// -// var es = SVG.select('ellipse') - -draw = SVG("svg") - -offset = draw.screenCTM() -draw.viewbox(100,100, 1000, 1000) -nested = draw.nested().size(500, 500).move(100,100).viewbox(0, 0, 400, 400) -rect = nested.rect(50, 50).stroke({width:0}).move(25, 90).scale(2, 0, 0).translate(10, 10).fill("red") - - -var box = rect.rbox() - -console.log(box.x - offset.e, box.y - offset.f); - - -div = document.createElement('div') - -Object.assign(div.style, { - position : 'absolute', - left : box.x + 'px', - top : box.y + 'px', - width : box.width + 'px', - opacity : 0.4, - height : box.height + 'px', - background : 'blue', +let mover = SVG.select("#new")[0] +mover.transform({ + position: [800, 500], + origin: [200, 400], + skew: [20, 0], + rotate: 30, }) - - -document.body.appendChild(div) - -// rect1.toParent(nested).transform() -// rect2.toParent(g2).transform() |