Big Wrong result #54

esprtk · 2024-08-16T04:29:23Z

Here is my result when run the library :
The blue line is origin polygon.
The red line is margin polygon.

Here is the code :


<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Polygon offset</title>
        <script src="./offset.js"></script>
        <style>
            canvas {
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <canvas id="canvas" width="1500" height="800"></canvas>

        <script type="text/javascript">
            // Định nghĩa các điểm của đa giác ban đầu
            var points = [

     


[207.41840481414974,200.20372440907403],
[245.92289376420604,189.36839650932907],
[235.69337392696423,228.03824165899934],
[198.295999629077,242.23107068015372],
[180.4803924910215,278.04453382325767],
[189.02644771672152,317.12093258362563],
[228.05368347398834,325.8887640798802],
[267.193637672605,334.13885409940065],
[276.59911837351336,295.2603647668039],
[286.6376211005561,256.54049308572576],
[317.63878654144327,231.2634730614677],
[339.1311293965072,197.5280436348192],
[299.89258594647015,189.76037294666878],
[281.98407697126083,153.9932748496069],
[321.98240236206254,154.35928841704168],
[359.30730954747673,168.74161450151823],
[386.67597771286154,197.91276468201423],
[403.23114639402047,234.3260368494311],
[379.3530206516083,266.41708094322075],
[354.0706170958918,297.4138561052581],
[324.6944471933648,324.5623485469733],
[294.72596085850444,351.05555195458874],
[264.7799466656382,377.5741536138138],
[224.90086666339678,380.68204327962076],
[184.957251093291,378.55893819799985],
[145.79208250212645,370.42938905763185],
[128.10227921210642,334.5536192462341],
[110.41245881518829,298.677857869996],
[92.72263841827015,262.80209649375786],
[110.10971107311899,226.7786360201303]

            ];

            var x = -10;

            // Khởi tạo đối tượng Offset
            var offset = new Offset();
            var margined = offset.data(points).margin(10);
            var padding = offset.data(points).padding(10);

            // Lấy canvas và context để vẽ
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');

            // Hàm vẽ đa giác
            function drawPolygon(ctx, polygon, color) {
                ctx.beginPath();
                ctx.moveTo(polygon[0][0], polygon[0][1]);

                for (var i = 1; i < polygon.length; i++) {
                    ctx.lineTo(polygon[i][0], polygon[i][1]);
                }

                ctx.closePath();
                ctx.strokeStyle = color;
                ctx.stroke();
            }

            // Vẽ đa giác ban đầu
            drawPolygon(ctx, points, 'blue');

            // Vẽ đa giác sau khi áp dụng margin
            margined.forEach(function(polygon) {
                drawPolygon(ctx, polygon, 'red');
            });

            // Vẽ đa giác sau khi áp dụng padding
            padding.forEach(function(polygon) {
                drawPolygon(ctx, polygon, 'green');
            });

        </script>
    </body>
</html>

Here is my result when run the library with your example :

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Polygon offset</title>
        <script src="./offset.js"></script>
        <style>
            canvas {
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <canvas id="canvas" width="1500" height="800"></canvas>

        <script type="text/javascript">
            // Định nghĩa các điểm của đa giác ban đầu
            var points = [

            
                [50, 50], [50, 150],
                [150, 150], [150, 50], [50, 50]
                
            ];

            var x = -10;

            // Khởi tạo đối tượng Offset
            var offset = new Offset();
            var margined = offset.data(points).margin(10);
            var padding = offset.data(points).padding(10);

            // Lấy canvas và context để vẽ
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');

            // Hàm vẽ đa giác
            function drawPolygon(ctx, polygon, color) {
                ctx.beginPath();
                ctx.moveTo(polygon[0][0], polygon[0][1]);

                for (var i = 1; i < polygon.length; i++) {
                    ctx.lineTo(polygon[i][0], polygon[i][1]);
                }

                ctx.closePath();
                ctx.strokeStyle = color;
                ctx.stroke();
            }

            // Vẽ đa giác ban đầu
            drawPolygon(ctx, points, 'blue');

            // Vẽ đa giác sau khi áp dụng margin
            margined.forEach(function(polygon) {
                drawPolygon(ctx, polygon, 'red');
            });

         

          
          console.log( margined);


            // Vẽ đa giác sau khi áp dụng padding
            padding.forEach(function(polygon) {
                drawPolygon(ctx, polygon, 'green');
            });

        </script>
    </body>
</html>

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Big Wrong result #54

Big Wrong result #54

esprtk commented Aug 16, 2024 •

edited

Loading

Big Wrong result #54

Big Wrong result #54

Comments

esprtk commented Aug 16, 2024 • edited Loading

esprtk commented Aug 16, 2024 •

edited

Loading