0
Итак, чтобы тренироваться во время летнего holliday, я решил преобразовать существующее приложение форм Windows в приложение web api.Контрактно рисуем холст HTML5
С помощью инструмента, который я пытаюсь сделать, вы можете использовать примеры использования UML и диаграммы. Я решил использовать холст HTML5, Javascript и бутстрап, чтобы выполнить эту работу.
Проблема, с которой я сталкиваюсь, заключается в том, что актеры должны быть нарисованы по одному в тот момент, когда проверяется радиобаллон, но когда я пытаюсь это сделать, он печатает трех актеров, когда документ готов, а не будет до тех пор, пока не будут два радиобарабана проверяются.
<!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