test/pathContain.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Path Contain</title>
    <script src="lib/config.js"></script>
</head>
<body>
    <script type="importmap">
    {
        "imports": {
          "zrender/": "../",
          "tslib": "../node_modules/tslib/tslib.es6.js"
        }
      }
    </script>
    <script type="module">
        import * as zrender from 'zrender/lib/zrender.js';
        import * as pathTool from 'zrender/lib/tool/path.js';
        import Circle from 'zrender/lib/graphic/shape/Circle.js';
        import Sector from 'zrender/lib/graphic/shape/Sector.js';
        import Rect from 'zrender/lib/graphic/shape/Rect.js';
        import * as pathContain from 'zrender/lib/contain/path.js';

        var path = pathTool.createFromString('M237.541,328.897c25.128,0,46.632-8.946,64.523-26.83c17.888-17.884,26.833-39.399,26.833-64.525V91.365c0-25.126-8.938-46.632-26.833-64.525C284.173,8.951,262.669,0,237.541,0c-25.125,0-46.632,8.951-64.524,26.84c-17.893,17.89-26.838,39.399-26.838,64.525v146.177c0,25.125,8.949,46.641,26.838,64.525C190.906,319.951,212.416,328.897,237.541,328.897zM396.563,188.15c-3.606-3.617-7.898-5.426-12.847-5.426c-4.944,0-9.226,1.809-12.847,5.426c-3.613,3.616-5.421,7.898-5.421,12.845v36.547c0,35.214-12.518,65.333-37.548,90.362c-25.022,25.03-55.145,37.545-90.36,37.545c-35.214,0-65.334-12.515-90.365-37.545c-25.028-25.022-37.541-55.147-37.541-90.362v-36.547c0-4.947-1.809-9.229-5.424-12.845c-3.617-3.617-7.895-5.426-12.847-5.426c-4.952,0-9.235,1.809-12.85,5.426c-3.618,3.616-5.426,7.898-5.426,12.845v36.547c0,42.065,14.04,78.659,42.112,109.776c28.073,31.118,62.762,48.961,104.068,53.526v37.691h-73.089c-4.949,0-9.231,1.811-12.847,5.428c-3.617,3.614-5.426,7.898-5.426,12.847c0,4.941,1.809,9.233,5.426,12.847c3.616,3.614,7.898,5.428,12.847,5.428h182.719c4.948,0,9.236-1.813,12.847-5.428c3.621-3.613,5.431-7.905,5.431-12.847c0-4.948-1.81-9.232-5.431-12.847c-3.61-3.617-7.898-5.428-12.847-5.428h-73.08v-37.691c41.299-4.565,75.985-22.408,104.061-53.526c28.076-31.117,42.12-67.711,42.12-109.776v-36.547C401.998,196.049,400.185,191.77,396.563,188.15z',
        {
            style: {
                brushType: 'both',
                lineWidth: 10,
                strokeColor: 'blue'
            }
        });
        // var path = new Rect({
        //     shape: {
        //         x: 0,
        //         y: 0,
        //         width: 100,
        //         height: 100,
        //         r: [10, 1000, 1000, 0]
        //     },
        //     style: {
        //         fill: 'green'
        //         // stroke: 'blue',
        //         // lineWidth: 0.3
        //     },
        //     // scale: [10, 10],
        //     position: [100, 100]
        // });
        console.log(path.getBoundingRect());
        path.updateTransform();

        // console.log(path.contain(144, 117));
        // return;

        // 随机散落点测试
        var pointsDom = document.getElementById('points');
        var ctx = pointsDom.getContext('2d');

        // path.brush(ctx);

        var points = [];

        var N_ITER = 1e5;
        for (var i = 0; i < N_ITER; i++) {
            var x = Math.random() * pointsDom.width;
            var y = Math.random() * pointsDom.height;
            points.push([x, y, false]);
        }
        var time = Date.now();
        for (var i = 0; i < points.length; i++) {
            // if (pathContain.containStroke(
            //     path.path.data, 10, points[i][0], points[i][1]
            // )) {
            //     points[i][2] = 2;
            // }
            // else if (pathContain.contain(
            //     path.path.data, points[i][0], points[i][1]
            // )) {
            //     points[i][2] = 1;
            // }
            // else {
            //     points[i][2] = 0;
            // }
            if (path.contain(points[i][0], points[i][1])) {
                // console.log(points[i][0], points[i][1]);
                points[i][2] = 1;
            }
            else {
                points[i][2] = 0;
            }
        }

        var cost = Date.now() - time;

        for (var i = 0; i < points.length; i++) {
            switch(points[i][2]) {
                case 0:
                    ctx.fillStyle = 'red';
                    break;
                case 1:
                    ctx.fillStyle = 'green';
                    break;
                case 2:
                    ctx.fillStyle = 'blue';
                    break;
            }
            ctx.fillRect(points[i][0], points[i][1], 2, 2);
        }
        document.getElementById('log').innerHTML = Math.round(1000 / cost * N_ITER) + ' ops/sec';

        // 原生isPointInPath测试
        var time = Date.now();
        for (var i = 0; i < 1000; i++) {
            path.path.rebuildPath(ctx);
            ctx.isPointInPath(points[i][0], points[i][1]);
        }
        var cost = Date.now() - time;
        document.getElementById('log').innerHTML += '<br />原生: ' + Math.round(1000 / cost * 1000) + ' ops/sec';

        document.body.onclick = function(e) {
            console.log(e.offsetX, e.offsetY);
        }
    </script>
    <div id="main" style="width:1000px;height:600px;position:absolute;left:0px;top:0px;"></div>
    <canvas id="points" width="1000" height="600" style="position:absolute;left:0px;top:0px;"></canvas>
    <div id="log" style="font-size:30px;color:blue;position:absolute;z-index:1;background-color:grey;"></div>
</body>
</html>