CODEWITHSUNDEEP
javascriptkineticjsspline
Rich
Rich

Reputation: 515

Using a spline to clip an image?

I have an image of a user's face in a canvas element. I want them to be able to draw around it to cut it out. I have successfully used a Splice to draw a nice smooth curve around their face (the splice points array increases by one with each mouse click, getting longer and longer).

But I am unsure how to actually use this Spline to clip the image. I can access the points array using the mySpline.allPoints array, and then draw my own clipping path, but this produces a very linear shape, without all the nice Spline calculated curves.

Anyone have a solution?

Upvotes: 0

Views: 268

Answers (1)

SoluableNonagon
SoluableNonagon

Reputation: 11755

This may not be the best answer, but here is the code of how the spline is drawn:

     drawFunc: function(canvas) {
        var points = this.getPoints(), length = points.length, context = canvas.getContext(), tension = this.getTension();
        context.beginPath();
        context.moveTo(points[0].x, points[0].y);

        // tension
        if(tension !== 0 && length > 2) {
            var ap = this.allPoints, len = ap.length;
            context.quadraticCurveTo(ap[0].x, ap[0].y, ap[1].x, ap[1].y);

            var n = 2;
            while(n < len - 1) {
                context.bezierCurveTo(ap[n].x, ap[n++].y, ap[n].x, ap[n++].y, ap[n].x, ap[n++].y);
            }

            context.quadraticCurveTo(ap[len - 1].x, ap[len - 1].y, points[length - 1].x, points[length - 1].y);

        }
        // no tension
        else {
            for(var n = 1; n < length; n++) {
                var point = points[n];
                context.lineTo(point.x, point.y);
            }
        }

        canvas.stroke(this);
    },

It uses quadraticCurveTo and bezierCurveTo to draw the curves, given the curve's points.

Upvotes: 1

Related Questions