Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

rectangle resize with control points example started. Needs work.

  • Loading branch information...
commit 379f8dfc9f958f2784b3c19f8090e9439ec6345b 1 parent 17e1c85
Dan Newcome authored
Showing with 73 additions and 0 deletions.
  1. +73 −0 samples/resize-rect.html
73 samples/resize-rect.html
View
@@ -0,0 +1,73 @@
+<!doctype html>
+<html>
+<head>
+ <script src="../donatello.js" type="text/javascript"></script>
+ <script src="../rect.js" type="text/javascript"></script>
+ <script>
+ /**
+ * Quick demo to show resizing a Donatello rect using
+ * corner handles. Currently only supports upper-left
+ * corner.
+ */
+ var corner;
+ var rect;
+ function onmd( el ) {
+ corner = el;
+ document.body.addEventListener( 'mousemove', onmm );
+ }
+ function onmu( el ) {
+ corner = null;
+ document.body.removeEventListener( 'mousemove', onmm );
+ }
+ function onmm( evt ) {
+ var attrs = rect.attr().properties;
+ console.log( attrs );
+ var ow = attrs.w;
+ var oh = attrs.h;
+ var dx = evt.clientX-(40-10) - attrs.x;
+ var dy = evt.clientY-(40-10) - attrs.y;
+ rect.attr( {
+ x: evt.clientX-(40-10),
+ y: evt.clientY-(40-10),
+ w: attrs.w - dx,
+ h: attrs.h - dy
+ // w: evt.clientX,
+ // h: evt.clientY
+ } );
+ corner.attr( { x: evt.clientX-40, y: evt.clientY-40 } );
+ evt.preventDefault();
+ }
+ function main() {
+ var paper = Donatello.paper('paper-div', 20, 20, 500, 500 );
+
+ rect = paper.rect( 20, 20, 200, 150, { 'stroke-width': 2 } );
+
+ var handle1 = paper.rect( 10, 10, 20, 20, { 'fill': 'black' } );
+ handle1.node().addEventListener( 'mousedown', function() { onmd( handle1 ); } );
+
+ var handle2 = paper.rect( 210, 10, 20, 20 );
+ handle2.node().addEventListener( 'mousedown', function() { onmd( handle2 ); } );
+
+ var handle3 = paper.rect( 10, 160, 20, 20 );
+ handle3.node().addEventListener( 'mousedown', function() { onmd( handle3 ); } );
+
+ var handle4 = paper.rect( 210, 160, 20, 20 );
+ handle4.node().addEventListener( 'mousedown', function() { onmd( handle4 ); } );
+
+ document.body.addEventListener( 'mouseup', onmu );
+ }
+
+
+ </script>
+ <style>
+ #paper-div {
+ border: 1px solid black
+ }
+ </style>
+
+</head>
+<body onload='main();'>
+ <div id="paper-div">
+ </div>
+</body>
+</html>
Please sign in to comment.
Something went wrong with that request. Please try again.