个人中心
gpt4 book ai didi

javascript - 有条件地绘制 HTML5 Canvas

转载 作者：行者123 更新时间：2023-12-02 14:27:08 27 4
gpt4 key购买 nike

因此，为了在暑假期间保持训练，我决定将现有的 Windows 窗体应用程序转换为 Web API 应用程序。

使用我试图制作的工具，您可以制作 UML 用例和图表。我决定使用 HTML5 canvas、Javascript 和 bootstrap 来完成这项工作。

我遇到的问题是，当检查单选按钮时，应该一次绘制一个 Actor ，但是当我尝试有条件地执行此操作时，它会在文档准备好时打印三个 Actor ，而不是等待 2 个单选按钮被选中检查过。 

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

这是我的 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++;

            }
        }
    } 

});

任何帮助将不胜感激!

最佳答案

您可以使用 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++;
  }
}

关于javascript - 有条件地绘制 HTML5 Canvas ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38125098/

27 4 0
文章推荐： javascript - 在函数处理时加载消息
文章推荐： laravel - 为什么 Model 不通过 slug 返回除 id 之外的数据？
文章推荐： haskell - 拥抱，功能及其计算方式
文章推荐： javascript - 如何知道哪些数据必须通过ajax发送具体问题
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com