konva/test/unit/shapes/TextPath-test.js

suite('TextPath', function() {

    // ======================================================
    test('Render Text Along Line', function() {
        var stage = addStage();
        var layer = new Konva.Layer();

        var c = "M 10,10 300,150";

        var path = new Konva.Path({
            stroke: 'red',
            strokeWidth: 1,
            data: c
        });

        layer.add(path);

        var textpath = new Konva.TextPath({
            fill: 'orange',
            fontSize: '24',
            fontFamily: 'Arial',
            text: 'The quick brown fox jumped over the lazy dog\'s back',
            data: c
        });
		textpath.on('mouseover', function() { this.setFill('blue'); layer.drawScene(); });
		textpath.on('mouseout', function() { this.setFill('orange'); layer.drawScene(); });

        layer.add(textpath);
        stage.add(layer);
		showHit(layer);

        assert.equal(textpath.getClassName(), 'TextPath', 'getClassName should be TextPath');

        var trace = layer.getContext().getTrace(true);
        //console.log(trace);
		assert.equal(trace, 'restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();restore();restore();');
    });

    // ======================================================
    test('Find Next Segment when Arc is in Path', function() {
        var stage = addStage();
        var layer = new Konva.Layer();

        var c = "M 50 50 a 150 50 0 0 1 250 50 l 50 0";
        var path = new Konva.Path({
            stroke: 'red',
            strokeWidth: 1,
            data: c
        });

        layer.add(path);

        var textpath = new Konva.TextPath({
            fill: 'black',
            fontSize: '10',
            text: 'All the world\'s a stage, and all the men and women merely players. They have their exits and their entrances; And one man in his time plays many parts.',
            data: c
        });

        layer.add(textpath);
        stage.add(layer);
    });

    // ======================================================
    test('Render Text Along Vertical Line', function() {
        var stage = addStage();
        var layer = new Konva.Layer();

        // Top Down
        var c = "M 50,10 50,150";

        var path = new Konva.Path({
            stroke: 'red',
            strokeWidth: 1,
            data: c
        });

        layer.add(path);

        var textpath = new Konva.TextPath({
            stroke: 'black',
            strokeWidth: 1,
            fill: 'orange',
            fontSize: '18',
            fontFamily: 'Arial',
            text: 'The quick brown fox jumped over the lazy dog\'s back',
            data: c
        });

        layer.add(textpath);


        // Bottom up
        c = "M 150,150 150,10";

        path = new Konva.Path({
            stroke: 'red',
            strokeWidth: 1,
            data: c
        });

        layer.add(path);

        textpath = new Konva.TextPath({
            stroke: 'black',
            strokeWidth: 1,
            fill: 'orange',
            fontSize: '18',
            fontFamily: 'Arial',
            text: 'The quick brown fox jumped over the lazy dog\'s back',
            data: c
        });

        layer.add(textpath);
        stage.add(layer);

    });

    // ======================================================
    test('Render Text Along two connected Bezier', function() {
        var stage = addStage();
        var layer = new Konva.Layer();

        var c = "M10,10 C0,0 10,150 100,100 S300,150 400,50";
        var path = new Konva.Path({
            stroke: 'red',
            strokeWidth: 1,
            data: c
        });

        layer.add(path);

        var textpath = new Konva.TextPath({
            stroke: 'black',
            strokeWidth: 1,
            fill: 'orange',
            fontSize: '8',
            fontFamily: 'Arial',
            text: 'All the world\'s a stage, and all the men and women merely players. They have their exits and their entrances; And one man in his time plays many parts.',
            data: c
        });

        layer.add(textpath);
        stage.add(layer);

    });

    // ======================================================
    test('Render Text Along Elliptical Arc', function() {
        var stage = addStage();
        var layer = new Konva.Layer();

        var c = "M 250,100 A 100 50 30 1 0 150 150";
        var path = new Konva.Path({
            stroke: 'red',
            strokeWidth: 1,
            data: c
        });

        layer.add(path);

        var textpath = new Konva.TextPath({
            fill: 'black',
            fontSize: '10',
            text: 'All the world\'s a stage, and all the men and women merely players. They have their exits and their entrances; And one man in his time plays many parts.',
            data: c
        });

        layer.add(textpath);
        stage.add(layer);
    });

    // ======================================================
    test('Render Text Along complex path', function() {
        var stage = addStage();
        var layer = new Konva.Layer();

        var c = 'M 955.92249,-42.126952 L 955.92249,-42.126952 L 955.92249,-42.126952 L 961.93262,212.9279 C 961.72797,213.3372 961.22315,215.2234 960.80572,215.5574 C 957.45077,218.2413 956.9054,218.3026 953.66869,216.6843 C 952.62164,216.1607 951.67338,214.3658 949.91236,214.8061 C 947.3405,215.4491 948.09281,215.8744 946.53166,217.4355 C 945.22315,218.744 943.52659,219.8744 943.52659,222.3188 C 943.52659,225.6087 944.62943,224.7909 946.15603,226.8264 C 947.55965,228.6979 948.18154,229.6696 948.78546,232.0852 C 949.37174,234.4304 951.2918,235.2197 952.16616,236.9685 C 953.11809,238.8723 956.44837,240.9001 955.17122,242.6029 C 955.17122,242.8772 955.27602,243.9657 955.17122,244.1055 C 954.37248,245.1705 952.25782,247.1195 951.79052,248.9887 C 951.25154,251.1447 951.97226,252.3937 951.41489,254.6232 C 950.9178,256.6116 949.53672,257.6472 949.53672,259.8821 C 949.53672,261.2894 949.87203,263.5578 950.66362,265.1409 C 951.32462,266.4629 953.24159,268.3158 953.66869,270.0242 C 954.03114,271.474 954.12634,273.8281 953.66869,275.6587 C 953.20033,277.5321 952.16616,278.7427 952.16616,280.9175 C 952.16616,281.7694 952.66216,286.9313 952.16616,287.3033 C 950.55129,287.3033 950.38215,287.5144 949.16109,288.4302 C 947.74898,289.4893 945.57047,291.4095 944.65349,292.9378 C 943.57061,294.7426 942.86906,296.6011 942.3997,298.9479 C 941.97063,301.0933 941.32659,303.0261 940.1459,304.2068 C 938.60102,305.7517 939.019,307.4128 939.019,309.8413 C 939.019,311.6467 939.44296,314.3005 938.26773,315.4758 C 937.15545,316.5881 934.88703,318.5361 934.88703,320.7346 C 934.88703,322.7058 934.79432,324.8714 935.26267,326.7448 C 935.72373,328.589 935.6383,330.6902 935.6383,332.7549 C 935.6383,334.5937 936.08895,337.1125 935.26267,338.765 C 933.38787,342.5146 935.26267,342.5858 935.26267,345.5264 C 935.61053,346.9179 935.6383,348.2383 935.6383,350.034 C 935.6383,351.5752 934.96036,354.5783 932.63323,353.4147 C 932.09123,353.1437 928.92886,348.8032 927.75,351.1609 C 926.64231,353.3763 926.87972,354.3829 928.12564,356.0442 C 929.10471,357.3496 930.01787,360.3569 928.12564,361.303 C 926.67006,362.0308 924.24963,362.5828 924.74494,365.0593 C 925.21304,367.3998 926.19847,367.8684 926.6231,369.567 C 926.7781,370.1869 927.80544,374.5783 926.24747,375.2014 C 924.2456,376.0022 920.63857,376.64 919.86171,378.5821 C 918.7844,381.2754 918.89909,381.8572 921.36424,383.0897 C 922.93947,383.8774 923.65296,384.6272 925.12057,386.0948 C 925.4026,386.3768 928.41848,391.3951 926.99874,392.1049 C 926.6231,392.2301 926.22599,392.3035 925.87184,392.4806 C 924.02717,393.4029 922.07311,394.7556 920.61297,395.4856 C 918.19436,396.6949 919.66034,398.0609 920.23734,400.3689 C 920.66358,402.0738 920.9143,404.1809 919.48607,405.2521 C 918.27148,406.163 916.40598,407.9567 914.60284,407.5059 C 912.7458,407.0416 911.06841,406.8699 909.71961,407.8815 C 908.08698,409.106 906.39997,410.6424 905.96328,412.3891 C 905.46424,414.3853 903.5041,416.8116 901.83132,417.648 C 900.14443,418.4914 897.73682,419.2163 895.82119,420.6531 C 894.39644,421.7216 891.99114,423.3808 890.93796,424.785 C 889.59804,426.5716 888.40557,428.0687 886.80599,429.6682 C 885.18365,431.2906 883.35936,432.8052 882.29839,434.9271 C 881.56876,436.3864 879.95545,436.9836 879.29333,438.3078 C 878.57656,439.7413 877.73542,441.3406 876.28826,442.0641 C 874.75553,442.8305 873.35007,443.456 871.40503,443.9423 C 867.75936,444.8537 869.30342,446.1864 868.7756,448.8255 C 868.7756,449.4008 868.88599,450.1518 868.7756,450.7037 C 868.4147,452.5082 867.97176,454.46 866.14617,454.46 C 863.87643,454.46 863.13519,452.5202 860.51167,452.9575 C 858.30041,453.326 855.7288,453.4708 853.75028,454.46 C 851.66578,455.5023 850.88183,456.6114 849.24268,457.8407 C 848.34172,458.5165 844.59521,461.2214 842.85692,461.2214 C 841.06194,461.2214 838.75283,461.625 837.59805,460.4702 C 836.02546,458.8976 834.59299,457.0331 834.59299,454.8357 C 834.59299,452.5753 834.44046,450.9268 833.09045,449.5768 C 831.22582,447.7122 830.88608,448.6344 829.33412,450.7037 C 827.57516,453.049 826.50225,455.876 824.07526,457.0895 C 820.97109,458.6416 819.33963,458.37

        var textpath = new Konva.TextPath({
            y: 50,
            fill: 'black',
            fontSize: '24',
            text: Array(4).join('All the world\'s a stage, and all the men and women merely players. They have their exits and their entrances; And one man in his time plays many parts.'),
            data: c
        });

        layer.add(textpath);
        stage.add(layer);
    });

    // ======================================================
    test('Render Text Along complex path cached', function() {
        var stage = addStage();
        var layer = new Konva.Layer();

        var c = "M10,10 C0,0 10,150 100,100 S300,150 400,50";

        var textpath = new Konva.TextPath({
            stroke: 'black',
            strokeWidth: 1,
            fill: 'orange',
            fontSize: 10,
            fontFamily: 'Arial',
            text: 'All the world\'s a stage, and all the men and women merely players. They have their exits and their entrances; And one man in his time plays many parts.',
            data: c,
            draggable : true
        });

        textpath.cache();

        layer.add(textpath);
        stage.add(layer);

        cloneAndCompareLayer(layer,50);
        showHit(layer);
    });

    test('Text path with letter spacing', function() {
        var stage = addStage();
        var layer = new Konva.Layer();

        var c = "M10,10 C0,0 10,150 100,100 S300,150 400,50";

        var textpath = new Konva.TextPath({
            stroke: 'black',
            strokeWidth: 1,
            fill: 'orange',
            fontSize: 10,
            fontFamily: 'Arial',
            letterSpacing: 5,
            text: 'All the world\'s a stage, and all the men and women merely players.',
            data: c
        });

        textpath.cache();

        layer.add(textpath);
        stage.add(layer);
        cloneAndCompareLayer(layer,50);
        showHit(layer);
    });
});