Gflot symbol plugin cross function - Create Stripped Cross Symbol

24 Views Asked by At

I'm using gflot library to create charts, and for missing data; I'm drawing cross symbol, using this function from symbol plugin.

    cross: function (ctx, x, y, radius, shadow) {
        // pi * r^2 = (2s)^2  =>  s = r * sqrt(pi)/2
        var size = radius * Math.sqrt(Math.PI) / 2;
        // right line
        ctx.moveTo(x - size, y - size);
        ctx.lineTo(x + size, y + size);
        // left line
        ctx.moveTo(x - size, y + size);
        ctx.lineTo(x + size, y - size);
    },

I tried to make this cross with stripped lines, several times by changing the values for setLineDash(), as you can see in below code:

     cross: function (ctx, x, y, radius, shadow) {
        // pi * r^2 = (2s)^2  =>  s = r * sqrt(pi)/2
        var size = radius * Math.sqrt(Math.PI) / 2;
        // right line
        ctx.beginPath();
        ctx.setLineDash([3, 3]);
        ctx.moveTo(x - size, y - size);
        ctx.lineTo(x + size, y + size);
        ctx.stroke();
        ctx.closePath();

        // left line
        ctx.beginPath();
        ctx.setLineDash([3, 3]);
        ctx.moveTo(x - size, y + size);
        ctx.lineTo(x + size, y - size);
        ctx.stroke();
        ctx.closePath();
    }, 

but no success because the cross looks more deleted than drawn.

not even gaps

I want to be something like this, but more user friendly: enter image description here

0

There are 0 best solutions below