JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<canvas id="canvas" width="300" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
// 2d coordinate classes
function Rect(topLeft, bottomRight){
this.left = topLeft.x;
this.top = topLeft.y;
this.right = bottomRight.x;
this.bottom = bottomRight.y;
this.width = this.right-this.left;
this.height = this.bottom-this.top;
};
function Point(x, y){
this.x = x;
this.y = y;
};
var pointOffset = 5;
Point.prototype.getRect = function(){
var topLeft = this.createNewPoint(new Vector(pointOffset, pointOffset), "-")
, bottomRight = this.createNewPoint(new Vector(pointOffset, pointOffset));
return new Rect(topLeft, bottomRight);
};
Point.prototype.contains = function(pt){
/* M is a point inside this rectangle if the following is true
(0 < AM*AB < AB*AB) && (0 < AM*AD < AD*AD)
Although canvas.getContext().rect().isPointInPath() should do the same trick,
I noticed it after implementing all the code :p
*/
var rect = this.getRect()
, a = new Point(rect.left, rect.top)
, b = new Point(rect.right, rect.top)
, d = new Point(rect.right, rect.bottom)
, m = pt
, am = calculateDistance(a, m)
, ab = calculateDistance(a, b)
, amab = am * ab
, abSqr = ab * ab
if(!(0 < amab && amab < abSqr))
return false;
var am = calculateDistance(a, m)
, ad = calculateDistance(a, d)
, amad = am * ad
, adSqr = ad * ad;
if(!(0 < amad && amad < adSqr))
return false;
return true;
};
Point.prototype.createNewPoint = function(vec, operator){
var x, y;
switch(operator)
{
case "-":
x = this.x - vec.x;
y = this.y - vec.y;
break;
default:
x = this.x + vec.x;
y = this.y + vec.y;
break;
};
return new Point(x, y);
};
Point.prototype.calculateVector = function(pt){
return new Vector(this.x-pt.x, this.y-pt.y);
};
Point.prototype.move = function(vec){
this.x = this.x - vec.x;
this.y = this.y - vec.y;
drawBezierLine(); // redraw the line
};
function...