Skip to content

Instantly share code, notes, and snippets.

@surferxo3

surferxo3/rect_draw.html

Last active July 26, 2020 12:12
Show Gist options
  • Save surferxo3/d6e3deb0080956dfa8ae9086e95edbca to your computer and use it in GitHub Desktop.
Save surferxo3/d6e3deb0080956dfa8ae9086e95edbca to your computer and use it in GitHub Desktop.
Download ZIP
Movable and re-sizable rectangle using Raphael SVG
Raw
rect_draw.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Movable and Re-sizable Raphael JS Shape</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8">
<div id="paper" style="border-style: dotted; width: 500px; height: 500px;"></div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js"></script>
<script>
// HELPER METHOD(s)
function getX(rect, ddx) {
var width = rect.paper.width,
thisBox = rect.getBBox();
if (ddx < 0) {
ddx = 0;
} else if (ddx > width - thisBox.width) {
ddx = width - thisBox.width;
}
return ddx;
}
function getY(rect, ddy) {
var height = rect.paper.height,
thisBox = rect.getBBox();
if (ddy < 0) {
ddy = 0;
} else if (ddy > height - thisBox.height) {
ddy = height - thisBox.height;
}
return ddy;
}
function getWidth(rect, ddw) {
var width = rect.paper.width,
thisBox = rect.getBBox();
if (ddw < 45) {
ddw = 45;
} else if (ddw > width - thisBox.x) {
ddw = width - thisBox.x;
}
return ddw;
}
function getHeight(rect, ddh) {
var height = rect.paper.height,
thisBox = rect.getBBox();
if (ddh < 45) {
ddh = 45;
} else if (ddh > height - thisBox.y) {
ddh = height - thisBox.y;
}
return ddh;
}
// RAPHAEL EVENT(s)
var dragStart = function() {
this.ox = this.attr('x');
this.oy = this.attr('y');
this.ow = this.attr('width');
this.oh = this.attr('height');
this.dragging = true;
};
var dragMove = function (dx, dy) {
var ddx = this.ox + dx;
var ddy = this.oy + dy;
switch (this.attr('cursor')) {
case 'nw-resize':
this.attr({
x: getX(this, ddx),
y: getY(this, ddy),
width: getWidth(this, this.ow - dx),
height: getHeight(this, this.oh - dy)
});
break;
case 'ne-resize':
this.attr({
y: getY(this, ddy),
width: getWidth(this, this.ow + dx),
height: getHeight(this, this.oh - dy)
});
break;
case 'se-resize':
this.attr({
width: getWidth(this, this.ow + dx),
height: getHeight(this, this.oh + dy)
});
break;
case 'sw-resize':
this.attr({
x: getX(this, ddx),
width: getWidth(this, this.ow - dx),
height: getHeight(this, this.oh + dy)
});
break;
case 'w-resize':
this.attr({
x: getX(this, ddx, this.ow - dx),
width: getWidth(this, this.ow - dx)
});
break;
case 'e-resize':
this.attr({
width: getWidth(this, this.ow + dx)
});
break;
case 's-resize':
this.attr({
height: getHeight(this, this.oh + dy)
});
break;
case 'n-resize':
this.attr({
y: getY(this, ddy),
height: getHeight(this, this.oh - dy)
});
break;
default:
this.attr({
x: getX(this, ddx),
y: getY(this, ddy)
});
break;
}
};
var dragEnd = function() {
this.dragging = false;
};
var changeCursor = function(e, mouseX, mouseY) {
if (this.dragging === true) {
return;
}
var relativeX = mouseX - $('#paper').offset().left - this.attr('x');
var relativeY = mouseY - $('#paper').offset().top - this.attr('y');
var shapeWidth = this.attr('width');
var shapeHeight = this.attr('height');
var resizeBorder = 10;
if (relativeX < resizeBorder && relativeY < resizeBorder) {
this.attr('cursor', 'nw-resize');
} else if (relativeX > shapeWidth - resizeBorder && relativeY < resizeBorder) {
this.attr('cursor', 'ne-resize');
} else if (relativeX > shapeWidth - resizeBorder && relativeY > shapeHeight - resizeBorder) {
this.attr('cursor', 'se-resize');
} else if (relativeX < resizeBorder && relativeY > shapeHeight - resizeBorder) {
this.attr('cursor', 'sw-resize');
} else if (relativeX < resizeBorder && relativeY < shapeHeight - resizeBorder) {
this.attr('cursor', 'w-resize');
} else if (relativeX > shapeWidth - resizeBorder && relativeY < shapeHeight - resizeBorder) {
this.attr('cursor', 'e-resize');
} else if (relativeX > resizeBorder && relativeY > shapeHeight - resizeBorder) {
this.attr('cursor', 's-resize');
} else if (relativeX > resizeBorder && relativeY < resizeBorder) {
this.attr('cursor', 'n-resize');
} else {
this.attr('cursor', 'move');
}
};
// MAIN
var paper = Raphael('paper', $('#paper').width(), $('#paper').height());
var shapes = paper.add([{
'type' : 'rect',
'x' : 0,
'y' : 0,
'width' : 45,
'height' : 45,
'fill': '#FFC1CE',
'fill-opacity': 0.6,
'title': 'Shape 1'
}, {
'type' : 'rect',
'x' : 50,
'y' : 0,
'width' : 45,
'height' : 45,
'fill': '#AFDAF7',
'fill-opacity': 0.6,
'title': 'Shape 2'
}]);
shapes.forEach(function(shape) {
shape.mousemove(changeCursor);
shape.drag(dragMove, dragStart, dragEnd);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment