Paper JS support Rounded Rectangles but it applies it to all corners. In my project I require rounded corners to be applied only to selected corners.
Like as shown below. After searching hours on the official document and searching internet for solutions I decided to create a function myself.
The following is the function that I created that works simply out of box.
var canvas = document.getElementById("myCanvas");
paper.install(window);
paper.setup(canvas);
var cornerSize = new Size(10, 10);
var specialRectangle = function(putOnPoint, boxSize, cornerSizeSpecific) {
// Finding all the original Points.
var point1 = putOnPoint;
var point2 = point1.add(new Point(boxSize.width, 0));
var point3 = point2.add(new Point(0, boxSize.height))
var point4 = point3.subtract(new Point(boxSize.width, 0));;
var recPath = new Path();
recPath.closed = true;
// Top Left Corner
if (cornerSizeSpecific[0] != null) {
var firstPoint = putOnPoint.add(new Point(0, cornerSizeSpecific[0].height))
var lastPoint = putOnPoint.add(new Point(cornerSizeSpecific[0].width, 0))
var firstSegment = new Segment(firstPoint, null, {
x: 0,
y: (cornerSizeSpecific[0].height * -1) / 2
});
var secondSegment = new Segment(lastPoint, {
x: (cornerSizeSpecific[0].width * -1) / 2,
y: 0
}, null);
recPath.add(firstSegment, secondSegment);
recPath.strokeColor = 'black';
} else {
recPath.add(point1);
}
// Top Right
if (cornerSizeSpecific[1] != null) {
var firstPoint = point2.subtract(new Point(cornerSizeSpecific[0].width, 0))
var firstSegment = new Segment(firstPoint, null, {
y: 0,
x: (cornerSizeSpecific[0].width * 1) / 2
});
var lastPoint = point2.add(new Point(0, cornerSizeSpecific[0].height))
var secondSegment = new Segment(lastPoint, {
y: (cornerSizeSpecific[0].height * -1) / 2,
x: 0
}, null);
recPath.add(firstSegment, secondSegment);
recPath.strokeColor = 'black';
} else {
recPath.add(point2);
}
// Bottom Right
if (cornerSizeSpecific[2] != null) {
var firstPoint = point3.subtract(new Point(0, cornerSizeSpecific[0].height))
var firstSegment = new Segment(firstPoint, null, {
x: 0,
y: (cornerSizeSpecific[0].height * 1) / 2
});
var lastPoint = point3.subtract(new Point(cornerSizeSpecific[0].width, 0))
var secondSegment = new Segment(lastPoint, {
x: (cornerSizeSpecific[0].width * 1) / 2,
y: 0
}, null);
recPath.add(firstSegment, secondSegment);
recPath.strokeColor = 'black';
} else {
recPath.add(point3);
}
// Botom Left.
if (cornerSizeSpecific[3] != null) {
var firstPoint = point4.add(new Point(cornerSizeSpecific[0].width, 0))
var firstSegment = new Segment(firstPoint, null, {
y: 0,
x: (cornerSizeSpecific[0].width * -1) / 2
});
var lastPoint = point4.subtract(new Point(0, cornerSizeSpecific[0].height))
var secondSegment = new Segment(lastPoint, {
y: (cornerSizeSpecific[0].height * 1) / 2,
x: 0
}, null);
recPath.add(firstSegment, secondSegment);
recPath.strokeColor = 'black';
} else {
recPath.add(point4);
}
//recPath.fullySelected = true;
return recPath;
// Building the first Corner.
}
/* Running the object. */
var pointToPlot = new Point(30, 30);
var sizeOfRectangle = new Size(70, 70);
var cornerSizeSpecific = [new Size(10, 10), new Size(10, 10), new Size(10, 10), new Size(10, 10)];
var rectangle = new specialRectangle(pointToPlot, sizeOfRectangle, cornerSizeSpecific);
var pointToPlot = new Point(130, 30);
var sizeOfRectangle = new Size(70, 70);
var cornerSizeSpecific = [new Size(10, 10), null, null, null];
var rectangle = new specialRectangle(pointToPlot, sizeOfRectangle, cornerSizeSpecific);
var pointToPlot = new Point(230, 30);
var sizeOfRectangle = new Size(70, 70);
var cornerSizeSpecific = [new Size(20, 20), new Size(20, 20), null, null];
var rectangle = new specialRectangle(pointToPlot, sizeOfRectangle, cornerSizeSpecific);
rectangle.fullySelected = false;
The following is a running example on JsFiddle.
Please feel free to use in your project and if there are any comments, suggestions or improvements. Please post theme below.
Leave a Reply
You must be logged in to post a comment.