gpt4 book ai didi

javascript - 有条件地绘制 HTML5 Canvas

转载 作者:行者123 更新时间:2023-12-02 14:27:08 28 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/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com