0
因此，爲了在夏季holliday期間保持訓練，我決定要將現有的Windows窗體應用程序轉換爲web api應用程序。連續繪製HTML5畫布
使用該工具我試圖讓你可以製作UML用例和圖表。我決定使用HTML5 canvas，Javascript和bootstrap來完成這項工作。
我遇到的問題是，當單選按鈕被選中時，應該繪製一個演員，但是當我試圖做到這一點時，它會在文檔準備好時打印三個演員，而不是直到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">×</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++;
}
}
}
});
任何幫助將非常感謝！
你正在做一個while循環，並且有1 = 1,2和3的條件。所以每次檢查Actor和Create都會得到3個'drawActor'調用 – bflemi3