Konva实例

2022-07-29 01:04:15 作者：互联网
<!DOCTYPE html>
<html>

<head>
    <script src="https://unpkg.com/konva@4.0.18/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Circle Demo</title>
    <style>
        body {
            margin: 20;
            padding: 0;
            overflow: hidden;
            background-color: #f0f0f0;
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <script>

        function isInCircle(ra, x, y) {
            return ra * ra > x * x + y * y;
        }

        var r = 150;
        var scale = 1.8;
        var fx = -0.487467 * scale;
        var fy = -0.299060 * scale;
        var dieW = 8.381850 * scale;
        var dieH = 8.834214 * scale;



        var radius = r * scale;
        var stage = new Konva.Stage({
            container: 'container',
            width: radius * 2,
            height: radius * 2
        });


        var layer = new Konva.Layer();


        var count = 0;
        for (var i = -6 * 3; i <= 6 * 3; i++) {
            //距离左边
            var x = radius + fx + i * dieW;

            var x1 = radius - x;
            var x2 = x1 - dieW;
            // debugger;
            for (var j = -6 * 3; j <= 6 * 3; j++) {
                //距离顶部
                var y = radius - fy - j * dieH;

                var y1 = radius - y;
                var y2 = y1 - dieH;

                // console.log('x1', x1);
                // console.log('x2', x2);
                // console.log('y1', y1);
                // console.log('y2', y2);

                var fillColor = undefined;
                if (isInCircle(radius, x1, y1) && isInCircle(radius, x1, y2) && isInCircle(radius, x2, y1) && isInCircle(radius, x2, y2)) {
                    count++;
                    fillColor = '#A5C9CA';
                }
                layer.add(new Konva.Rect({
                    width: dieW,
                    height: dieH,
                    x: x,
                    y: y,
                    stroke: "black",
                    strokeWidth: 0.4,
                    fill: fillColor,
                }));
            }
        }
        // alert(count);

        // add the shape to the layer
        layer.add(new Konva.Circle({
            x: radius,
            y: radius,
            radius: radius,

            stroke: "black",
            strokeWidth: 0.4,
            // fill: 'lightgray',
            // strokeEnabled: false
        }));

        layer.add(new Konva.Circle({
            x: radius,
            y: radius,
            radius: 1,
            fill: 'red',
            strokeEnabled: false
        }));

        layer.add(new Konva.Circle({
            x: radius + fx,
            y: radius - fy,
            radius: 1,
            fill: 'blue',
            strokeEnabled: false
        }));
        // for (var i = 0; i <= 6 * 3; i++) {
        //     layer.add(new Konva.Rect({
        //         width: dieW,
        //         height: dieH,
        //         x: radius + fx,
        //         y: radius - fy,
        //         stroke: "black",
        //         strokeWidth: 0.4,
        //         fill: undefined,
        //     }));
        // }


        // add the layer to the stage
        stage.add(layer);
    </script>
</body>

</html>
标签：scale,Konva,实例,radius,ra,var,new
来源： https://www.cnblogs.com/cyjngup/p/16530827.html