iedasharrayworkaround.js

iedasharrayworkaround.js

YUI({filter: 'raw'}).use('graphics', function (Y) 
{ 
    var dashArray = [4, 2],
        drawDashedLine = function(path, xStart, yStart, xEnd, yEnd, dashSize, gapSize)
        {
            dashSize = dashSize || 10;
            gapSize = gapSize || 10;
            var segmentLength = dashSize + gapSize,
                xDelta = xEnd - xStart,
                yDelta = yEnd - yStart,
                delta = Math.sqrt(Math.pow(xDelta, 2) + Math.pow(yDelta, 2)),
                segmentCount = Math.floor(Math.abs(delta / segmentLength)),
                radians = Math.atan2(yDelta, xDelta),
                xCurrent = xStart,
                yCurrent = yStart,
                i;
            xDelta = Math.cos(radians) * segmentLength;
            yDelta = Math.sin(radians) * segmentLength;

            for(i = 0; i < segmentCount; ++i)
            {
                path.moveTo(xCurrent, yCurrent);
                path.lineTo(xCurrent + Math.cos(radians) * dashSize, yCurrent + Math.sin(radians) * dashSize);
                xCurrent += xDelta;
                yCurrent += yDelta;
            }

            path.moveTo(xCurrent, yCurrent);
            delta = Math.sqrt((xEnd - xCurrent) * (xEnd - xCurrent) + (yEnd - yCurrent) * (yEnd - yCurrent));

            if(delta > dashSize)
            {
                path.lineTo(xCurrent + Math.cos(radians) * dashSize, yCurrent + Math.sin(radians) * dashSize);
            }
            else if(delta > 0)
            {
                path.lineTo(xCurrent + Math.cos(radians) * delta, yCurrent + Math.sin(radians) * delta);
            }

            path.moveTo(xEnd, yEnd);
        },
        mygraphic = new Y.Graphic({render: "#mygraphiccontainer"}),
        connector = mygraphic.addShape({
            type: "path",
            stroke: {
                weight: 4,
                color: "#00f",
                opacity: 1,
                dashstyle: Y.VMLShape ? "none" : dashArray 
            }, 
            id: "connector"
        }),
        diamond1 = mygraphic.addShape({
            type: "path",
            stroke: {
                weight: 1,
                color: "#000"
            },
            fill: {
                color: "#f00"
            },
            id: "diamond1"
        }),
        diamond2 = mygraphic.addShape({
            type: "path",
            stroke: {
                weight: 1,
                color: "#000"
            },
            fill: {
                color: "#f00"
            },
            id: "diamond2"
        });

        diamond1.moveTo(60, 60);
        diamond1.lineTo(80, 40);
        diamond1.lineTo(100, 60);
        diamond1.lineTo(80, 80);
        diamond1.lineTo(60, 60);
        diamond1.end();

        connector.moveTo(100, 60);
        if(Y.VMLShape) {
            drawDashedLine(connector, 100, 60, 450, 220, dashArray[0], dashArray[1]); 
        } else {
            connector.lineTo(450, 220);
        }
        connector.end();

        diamond2.moveTo(450, 220);
        diamond2.lineTo(470, 200);
        diamond2.lineTo(490, 220);
        diamond2.lineTo(470, 240);
        diamond2.lineTo(450, 220);
        diamond2.end();
});