堆棧內存溢出
  簡體   English   中英

在JS中繪制多個多邊形

[英]Drawing multiple polygons in js

 原文  2016-01-18 11:02:24  8   1    javascript/ canvas/ polygon

問題描述

我正在使用此代碼，並且具有一定的魅力-它在給定的圖片上繪制了一個多邊形（帶有畫布），但是我正在努力修改代碼，以便使我能夠繪制多個多邊形而不是一個多邊形。 我對js不熟悉，還沒有找到任何可能解決該問題的方法，希望能對您有所幫助。

碼： 

    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="main.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <script>

    //radius of click around the first point to close the draw
    var END_CLICK_RADIUS = 15;
    //the max number of points of your polygon
    var MAX_POINTS = 8;

    var mouseX = 0;
    var mouseY = 0;
    var isStarted = false;
    var points = null;

    var canvas = null;



    window.onload = function() {
        background = document.getElementById('justanimage');

        //initializing canvas and draw color
        canvas = document.getElementById("canvas");
        ctx = canvas.getContext("2d");
        changeColor("blue");

        image = new Image();
        image.onload = function() {
            ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
        };
        image.src = 'justanimage.gif';


        canvas.addEventListener("click", function(e) {
            var x = e.clientX-canvas.offsetLeft;
            var y = e.clientY-canvas.offsetTop;
            if(isStarted) {
                //drawing the next line, and closing the polygon if needed
                if(Math.abs(x - points[0].x) < END_CLICK_RADIUS && Math.abs(y - points[0].y) < END_CLICK_RADIUS) {
                    isStarted = false;
                } else {
                    points[points.length] = new Point(x, y);
                    if(points.length >= MAX_POINTS) {
                        isStarted = false;
                    }
                }
            } else if(points == null) {
                //opening the polygon
                points = new Array();
                points[0] = new Point(x, y);
                isStarted = true;
            }
        }, false);

        //we just save the location of the mouse
        canvas.addEventListener("mousemove", function(e) {
            mouseX = e.clientX - canvas.offsetLeft;
            mouseY = e.clientY - canvas.offsetTop;
        }, false);

        //refresh time
        setInterval("draw();", 5);

    }

    //object representing a point
    function Point(x, y) {
        this.x = x;
        this.y = y;
    }

    //resets the application
    function reset() {
        isStarted = false;
        points = null;
        document.getElementById("coordinates").innerHTML = " ";
    }

    //displays coordinates of the the point list
    function save() {
        if(points == null) {
            alert("No picture!");
        } else {
            var s = "";
            for(var a in points) {
                //inversing y axis by (canvas.height - points[a].y)
                s += "(" + points[a].x + "," + (canvas.height - points[a].y) + ")\n";
            }
            document.getElementById("coordinates").innerHTML = s + '\n';
        }
    }

    //draws the current shape
    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        ctx.beginPath();

        if(points != null && points.length > 0) {
            ctx.moveTo(points[0].x, points[0].y);

            for(i = 1 ; i < points.length ; i++) {
                ctx.lineTo(points[i].x, points[i].y);
            }

            if(isStarted) {
                ctx.lineTo(mouseX, mouseY);
            } else {
                ctx.lineTo(points[0].x, points[0].y);
            }
        }
        ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
        ctx.stroke();
    }


</script>


    </head>
    <body>
    <div id="outer">
    <canvas id="canvas" width=300 height=300; ></canvas>
    </div>

    <p id="coordinates"> </p>
    <input type="button" value="Save" onclick="save();" />
    <input type="button" value="Reset" onclick="reset();" />

    </body>
    </html>

1 個解決方案

解決方案1
 4 已采納  2016-01-18 13:08:53

基本上，此解決方案會添加一個新的polygons數組，該數組將保留所有多邊形。 現在， points組已包含在polygons 。 

var polygons = [];

window.onload = function () {
    // ...
    canvas.addEventListener("click", function (e) {
        // ...
        if (isStarted) {
            //drawing the next line, and closing the polygon if needed
            if (Math.abs(x - polygons[polygons.length - 1][0].x) < END_CLICK_RADIUS && Math.abs(y - polygons[polygons.length - 1][0].y) < END_CLICK_RADIUS) {
                isStarted = false;
            } else {
                polygons[polygons.length - 1].push(new Point(x, y));
                if (polygons[polygons.length - 1].length >= MAX_POINTS) {
                    isStarted = false;
                }
            }
        } else {
            //opening the polygon
            polygons.push([new Point(x, y)]);
            isStarted = true;
        }
    }, false);
    // ...
}


function draw() {
    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
    polygons.forEach(function (points, i) {
        ctx.beginPath();
        points.forEach(function (p, j) {
            if (j) {
                ctx.lineTo(p.x, p.y);
            } else {
                ctx.moveTo(p.x, p.y);
            }
        });
        if (i + 1 === polygons.length && isStarted) { // just the last one
            ctx.lineTo(mouseX, mouseY);
        } else {
            ctx.lineTo(points[0].x, points[0].y);
        }
        ctx.stroke();
    });
}

（另一種解決方案可能是保存帶有最后一個多邊形的圖像，然后將其再次用於新的多邊形。）

工作示例： 

 //radius of click around the first point to close the draw var END_CLICK_RADIUS = 15; //the max number of points of your polygon var MAX_POINTS = 8; var mouseX = 0; var mouseY = 0; var isStarted = false; var polygons = []; var canvas = null; var ctx; var image; window.onload = function () { var background = document.getElementById('justanimage'); //initializing canvas and draw color canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d"); //changeColor("blue"); // <-- is missing! image = new Image(); image.onload = function () { ctx.drawImage(image, 0, 0, canvas.width, canvas.height); }; image.src = 'http://lorempixel.com/10/10/'; canvas.addEventListener("click", function (e) { var x = e.clientX - canvas.offsetLeft; var y = e.clientY - canvas.offsetTop; if (isStarted) { //drawing the next line, and closing the polygon if needed if (Math.abs(x - polygons[polygons.length - 1][0].x) < END_CLICK_RADIUS && Math.abs(y - polygons[polygons.length - 1][0].y) < END_CLICK_RADIUS) { isStarted = false; } else { polygons[polygons.length - 1].push(new Point(x, y)); if (polygons[polygons.length - 1].length >= MAX_POINTS) { isStarted = false; } } } else { //opening the polygon polygons.push([new Point(x, y)]); isStarted = true; } }, false); //we just save the location of the mouse canvas.addEventListener("mousemove", function (e) { mouseX = e.clientX - canvas.offsetLeft; mouseY = e.clientY - canvas.offsetTop; }, false); //refresh time setInterval("draw();", 5); } //object representing a point function Point(x, y) { this.x = x; this.y = y; } //resets the application function reset() { isStarted = false; points = null; document.getElementById("coordinates").innerHTML = " "; } //draws the current shape function draw() { ctx.drawImage(image, 0, 0, canvas.width, canvas.height); polygons.forEach(function (points, i) { ctx.beginPath(); points.forEach(function (p, j) { if (j) { ctx.lineTo(px, py); } else { ctx.moveTo(px, py); } }); if (i + 1 === polygons.length && isStarted) { // just the last one ctx.lineTo(mouseX, mouseY); } else { ctx.lineTo(points[0].x, points[0].y); } ctx.stroke(); }); } 
 <canvas id="canvas" width="500" height="500"></canvas> <img id="justanimage" />

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 使用 google-maps-react 繪制多個多邊形 在Google地圖上繪制多邊形 在MapBox GL JS中在圖層上繪制多邊形，例如三角形和正方形，而不是圓形 從MySQL數據庫在Google Maps API v3上繪制多個多邊形 單擊多邊形時，繪制多個多邊形需要在 infoWindow.setContent 中顯示建築物名稱 從XML文件在Google Maps API V3上繪制多個多邊形 繪制多個chart.js圖表​​（nodejs） 在p5.js中在畫布上繪制多個rect 使用 DrawingManager 在 Google 地圖多邊形中繪制孔 如何在 map 上繪制多邊形時刪除覆蓋？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM