― I’M SHISHIR RAVEN

WEBSITE & App Builder

Lorem Ipsum is simply dummy text of the printing and type setting industry. Lorem Ipsum has been the industry’s standard dummy text.

Paper JS : Drawing Rectangle with independent Rounded Corners.

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.


Posted

in

,

by

Tags: