连续绘制HTML5画布

Question

So to stay trained during the summer holliday I decided I wanted to convert an existing windows forms application into a web api application. 因此，为了在暑假期间保持培训，我决定将现有的Windows Forms应用程序转换为Web api应用程序。

With the tool I am trying to make you can make UML use cases and diagrams. 我正在尝试使用该工具来制作UML用例和图表。 I decided to use HTML5 canvas, Javascript and bootstrap to do the job. 我决定使用HTML5 canvas，Javascript和bootstrap来完成这项工作。

The issue I'm having is that the actors should be drawn one at a time when a radiobutton is checked but when I try to do this condtionally it prints three actors when the document is ready instead of wating untill the 2 radiobuttons are checked. 我遇到的问题是，在选中单选按钮时，应该一次绘制一个演员，但是当我有条件地尝试这样做时，它将在文档准备就绪时打印三个演员，而不是等待直到选中两个单选按钮。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/styles.css">
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script><!-- Tether for Bootstrap -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/drawfigure.js"></script>
<body>

<div class="container">
    <div class="col-md-4">
        <fieldset id="group1">
            <h2>Elementen</h2>
            <div class="radio">
                <label class="radio-inline"><input type="radio" value="Actor" id="rbActor" name="optradioElementen">Actor</label>
            </div>
            <div class="radio">
                <label class="radio radio-inline"><input type="radio" id="rbLine" value="Line" name="optradioElementen">Line</label>
            </div>
            <div class="radio">
                <label class="radio radio-inline"><input type="radio" id="UseCase" value="UseCase" name="optradioElementen">Use Case</label>
            </div>
        </fieldset>
    </div>

    <div class="col-md-4">
        <fieldset>
            <div>
                <h2>Modes</h2>
                <div class="radio">
                    <label class="radio control-label"><input type="radio" value="Create" id="rbCreate"
                                                              name="optradioModes">Create</label>
                </div>
                <div class="radio">
                    <label class="radio control-label"><input type="radio" value="Select" id="rbSelect"
                                                              name="optradioModes">Select</label>
                </div>
            </div>
        </fieldset>
    </div>

    <div class="col-md-2 col-md-offset-2">
        <h2>verwijderen</h2>
        <button class="btn btn-default">Clear All</button>
        <button class="btn btn-default">Remove</button>
    </div>
</div>
<div class="container" style="position:relative;">

    <canvas id="thecanvas" width="800" height="800">

    </canvas>

</div>
<!--myModal-->
    <div class="modal" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="false">&times;</span></button>
                    <h4 class="modal-title">Modal title</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <fieldset class="form-group">
                            <label for="exampleInputEmail1">Email address</label>
                            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
                            <small class="text-muted">We'll never share your email with anyone else.</small>
                        </fieldset>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
<!-- /.modal -->
</body>
</html>

and this is my javascript / jquery 这是我的javascript / jquery

$(document).ready(function() {
    var canvas = document.getElementById("thecanvas");
    var ctx = canvas.getContext('2d');

    function drawEllipseOnPosition(event) {
        var x = event.x - 400;
        var y = event.y - 150;

        drawEllipseWithBezierByCenter(ctx, x, y, 200, 60, '#0099ff', "Jeff");
    }

    function drawActor(startX, startY) {
        if (canvas.getContext("2d")) { // Check HTML5 canvas support
            context = canvas.getContext("2d"); // get Canvas Context object
            context.beginPath();
            context.fillStyle = "bisque"; // #ffe4c4
            context.arc(startX, startY, 30, 0, Math.PI * 2, true); // draw circle for head
            // (x,y) center, radius, start angle, end angle, anticlockwise
            context.fill();

            context.beginPath();
            context.strokeStyle = "red"; // color
            context.lineWidth = 3;
            context.arc(startX, startY, 20, 0, Math.PI, false); // draw semicircle for smiling
            context.stroke();

            // eyes
            context.beginPath();
            context.fillStyle = "green"; // color
            context.arc(startX - 10, startY - 5, 3, 0, Math.PI * 2, true); // draw left eye
            context.fill();
            context.arc(startX + 10, startY - 5, 3, 0, Math.PI * 2, true); // draw right eye
            context.fill();

            // body
            context.beginPath();
            context.moveTo(startX, startY + 30);
            context.lineTo(startX, startY + 130);
            context.strokeStyle = "navy";
            context.stroke();

            // arms
            context.beginPath();
            context.strokeStyle = "#0000ff"; // blue
            context.moveTo(startX, startY + 30);
            context.lineTo(startX - 50, startY + 80);
            context.moveTo(startX, startY + 30);
            context.lineTo(startX + 50, startY + 80);
            context.stroke();

            // legs
            context.beginPath();
            context.strokeStyle = "orange";
            context.moveTo(startX, startY + 130);
            context.lineTo(startX - 50, startY + 230);
            context.moveTo(startX, startY + 130);
            context.lineTo(startX + 50, startY + 230);
            context.stroke();
        }
    }

    function drawEllipseWithBezierByCenter(ctx, cx, cy, w, h, style, text) {
        drawEllipseWithBezier(ctx, cx - w / 2.0, cy - h / 2.0, w, h, style, text);
    }


    function drawEllipseWithBezier(ctx, x, y, w, h, style, text) {
        var kappa = .5522848,
            ox = (w / 2) * kappa, // control point offset horizontal
            oy = (h / 2) * kappa, // control point offset vertical
            xe = x + w,           // x-end
            ye = y + h,           // y-end
            xm = x + w / 2,       // x-middle
            ym = y + h / 2;       // y-middle

        ctx.save();
        ctx.beginPath();
        ctx.moveTo(x, ym);
        ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
        ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
        ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
        ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
        ctx.font = '20pt Calibri';
        ctx.fillText(text, x + 25, y + 35);
        if (style)
            ctx.strokeStyle = style;
        ctx.stroke();
        ctx.restore();
    }

    canvas.addEventListener("click", drawEllipseOnPosition, false);

    var i = 0;
if($("input[value='Actor']").is(":checked")){ 
            if($("input[value='Create']:checked"){  
            while(i < 3){ 
                if(i==0){
            drawActor(100, 550); 
                } 
                if(i == 1){ 
                     drawActor(100, 300);
                }
                if( i == 2){ 
                   drawActor(100, 50);
                } 
                i++;

            }
        }
    } 

});

Any help would be very much appreciated! 任何帮助将不胜感激！

Answer 1

You can "jump out" of a loop using break . 您可以使用break来“跳出”循环。

var i = 0;
if ($("input[value='Actor']").is(":checked") && $("input[value='Create']:checked")) {
  while (i < 3) {
    if (i == 0) {
      drawActor(100, 550);
      break;
    }
    if (i == 1) {
      drawActor(100, 300);
      break;
    }
    if (i == 2) {
      drawActor(100, 50);
      break;
    }
    i++;
  }
}

连续绘制HTML5画布

问题描述

1 个解决方案

解决方案1
2 已采纳 2016-06-30 14:16:23

连续绘制HTML5画布

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-06-30 14:16:23

解决方案1
2 已采纳 2016-06-30 14:16:23