ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Konva实例

2022-07-29 01:04:15  阅读:161  来源: 互联网

标签:scale Konva 实例 radius ra var new


<!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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有