Diffrent line collors

[AviFix]

Hi Thanks for your great work.

i was wondering if there is away to have different colors for the line (before and after the Grip)

Thank's allot

Avi

[Mottie]

Hi @AviFix!

It's not really built-in to do this, but you can use the slider callback to draw a new line up to the grip position (demo):

var drawLine = function (slider) {
    var c, start, x, y,

        // set options for new line here
        color = '#f00',
        width = 5,

        o = slider.options,
        end = $.inArray(slider.percent, slider.arrayP);
    if (end > -1) {
        c = slider.ctx;
        // clear & redraw the curve
        c.clearRect(0, 0, slider.canvas.width, slider.canvas.height);
        slider.drawCurve();
        // draw new line using saved variables
        c.lineWidth = width;
        c.strokeStyle = color;
        c.lineCap = o.curve.cap;
        c.beginPath();
        x = slider.arrayX;
        y = slider.arrayY;
        c.moveTo(x[0], y[0]);
        for (i = 1; i <= end; i++) {
            c.lineTo(x[i], y[i]);
        }
        c.stroke();
    }
};

$('#slider').pathslider({
    // canvas bezier curve styling
    curve: {
        width: 2,
        color: "#333",
        cap: "round"
    },
    // *** Curve settings ***
    // 0-100 starting percentage value
    value: 50,
    // BEZIER POINTS
    // sx,sy     = start x & y
    // csxo,csyo = control start x & y offset from start point
    // cexo,ceyo = control end x & y offset from end point
    // ex,ey     = end x & y
    //           [ sx,sy, csxo,csyo, cexo,ceyo,  ex,ey ]
    points: [0, 50, 50, -50, -50, -50, 250, 50],

    // update curves upon creation & during sliding
    create: function (e, slider) {
        drawLine(slider);
    },
    // called while the grip is moving
    slide: function (e, slider) {
        drawLine(slider);
    }
});

[AviFix]

Hi

Thank's alot,

It seems to work very nice.

I have managed to create an AngularJs Directive (with the help of codef0rmer) here.

i'm just wondering if there is a way to make the (red) line sharper (it seems not quite sharp)?

Thank's for your help

Avi

[Mottie]

Hmm, yeah, it's not that smooth. It would be best to calculate out a new curve and draw it instead of using saved data...

Or, since the data points are usually really close together, maybe just draw every 10th data point or so like this

for (i = 1; i <= end; i+=10) {

Here is an updated demo - it looks a bit smoother.

[Mottie]

You can now add a second color to the curve.color value to add a color to either side of the grip demo:

curve: {
  width: 2,
  color: ["#f00", "#00f"],
  cap: "round"
}

For additional tweaks, a drawCanvas callback was added. A code example can be seen in issue #8.