问题是无法将形状放置在新打开的模态窗口中。
我是网络技术编码的初学者。因此，解决方案可能是如此简单，但我三天都找不到。
我有一个索引html，其中有一个diff按钮，应该单击该按钮，然后绘制一个来自上载XML的处理流程形状。
我确实上传了XML，确实在控制器中获得了XML，并正确响应了要绘制的坐标。但是它在按钮下方的索引页面（而不是模式窗口）中绘制形状。
我尝试了很多方法将形状放置到模态中，但是我做不到。
谢谢。
<!DOCTYPE HTML>
<html>
<head>
<title>EMM XML DIFF</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="/js/controller.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
</head>
<body>
<div class="container" ng-app="app">
<h3 style="color:blue">EMM XML DIFF</h3>
<div ng-controller="uploadFileController">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="uploadfile">Upload File 1:</label>
<div class="col-sm-5">
<input class="form-control" type="file" file-model = "uploadedFile" placeholder="Upload File"></input>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" ng-click = "doUploadFile()">Upload</button>
</div>
</div>
</form>
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="uploadfile">Upload File 2:</label>
<div class="col-sm-5">
<input class="form-control" type="file" file-model = "uploadedFile" placeholder="Upload File"></input>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" ng-click = "doUploadFile()">Upload</button>
</div>
</div>
</form>
<hr/>
<div class="col-sm-offset-2">
<p ng-bind="uploadResult"></p>
</div>
</div>
<div ng-controller="diffxmlfiles">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
<style>.modal-dialog { max-width: 1490px !important;
min-width: 971px !important;
width: 95% !important;
height:95% !important;
max-height: 1490px !important;
min-height: 971px !important; } </style>
</script>
<div class="col-sm-offset-2">
<button class="btn btn-primary btn-block" ng-click="DOdiffxmlfiles()">Diff files</button>
</div>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
<div ng-controller="getFilesController">
<div class="col-sm-offset-2">
<button type="button" class="btn btn-primary btn-block" ng-click="doGetFiles()">Get Files</button>
</div>
<hr/>
<div class="col-sm-offset-2" ng-model="lstFiles">
<ul>
<li ng-repeat="file in lstFiles"><a href='{{file}}'>{{file}}</a></li>
</ul>
</div>
</div>
<script src="/js/uploadFileCtrl.js"></script>
<script src="/js/getFilesCtrl.js"></script>
<canvas id="myCanvas"></canvas>
<script type="text/javascript" src="/js/canvas.js"></script>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
var myCanvas = document.getElementById("myCanvas");
myCanvas.width = 1000;
myCanvas.height = 1000;
var ctx = myCanvas.getContext("2d");
function drawLine(ctx, startX, startY, endX, endY){
ctx.beginPath();
ctx.moveTo(startX,startY);
ctx.lineTo(endX,endY);
ctx.stroke();
}
function canvas_arrow(ctx, fromx, fromy, tox, toy, returnnumber){
fromx = fromx+30;
fromy = fromy;
tox = tox-30;
toy = toy-5;
var headlen = 10; // length of head in pixels
var angle = Math.atan2(toy-fromy,tox-fromx);
ctx.moveTo(fromx, fromy);
ctx.lineTo(tox, toy);
ctx.lineTo(tox-headlen*Math.cos(angle-Math.PI/6),toy-headlen*Math.sin(angle-Math.PI/6));
ctx.moveTo(tox, toy);
ctx.lineTo(tox-headlen*Math.cos(angle+Math.PI/6),toy-headlen*Math.sin(angle+Math.PI/6));
ctx.stroke();
if (returnnumber != '9999') {
ctx.beginPath();
ctx.fillStyle = "rgba(255, 255, 255, 0.5)";
ctx.fillStyle = "white";
ctx.fillRect((((fromx+tox))-20)/2, (((fromy+toy))-10)/2, 20, 10);
ctx.stroke();
ctx.font = "bold 14px Comic Sans MS";
ctx.fillStyle = "black";
ctx.textAlign = "center";
ctx.fillText(returnnumber, (fromx+tox)/2, (fromy+toy)/2);
ctx.stroke();
}
}
function drawCircle(ctx, startX, startY, r, name){
ctx.beginPath();
ctx.arc(startX, startY, r,0, 2 * Math.PI);
ctx.font = "bold 10px Comic Sans MS";
ctx.fillStyle = "black";
ctx.textAlign = "center";
ctx.fillText(name, startX, startY);
ctx.stroke();
}
function fillRect(ctx, startX, startY, len, h, name){
ctx.beginPath();
ctx.fillStyle = "rgba(255, 255, 255, 0.5)";
ctx.fillStyle = "yellow";
ctx.fillRect(startX-len/2, startY-h/2, len, h);
ctx.stroke();
ctx.font = "bold 10px Comic Sans MS";
ctx.fillStyle = "black";
ctx.textAlign = "center";
ctx.fillText(name, startX-len/2+30, startY-h/2+30);
ctx.stroke();
}
var app = angular.module('app', ['ui.bootstrap']);
app.controller('diffxmlfiles', function($scope, $http, $location,$modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.DOdiffxmlfiles = function(size){
var url = $location.absUrl() + "difffiles";
$http.get(url).then(function (response) {
$scope.drawablelist=response.data
}, function error(response) {
$scope.postResultMessage = "Error with status: " + response.statusText;
});
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
/////
var JSdrawablelist = $scope.drawablelist;
console.log(JSdrawablelist);
ctx.fillStyle = "#FF0000";
var i;
for (i = 0; i < JSdrawablelist[0].comps.length; i++) {
if (JSdrawablelist[0].comps[i].componentType == "dist") {
fillRect(ctx,JSdrawablelist[0].comps[i].x, JSdrawablelist[0].comps[i].y, 60, 60, JSdrawablelist[0].comps[i].name);
}
else if (JSdrawablelist[0].comps[i].componentType == "coll"){
drawCircle(ctx, JSdrawablelist[0].comps[i].x, JSdrawablelist[0].comps[i].y, 30, JSdrawablelist[0].comps[i].name);
}
}
for (i = 0; i < JSdrawablelist[0].paths.length; i++) {
canvas_arrow(ctx,JSdrawablelist[0].paths[i].fromX, JSdrawablelist[0].paths[i].fromY, JSdrawablelist[0].paths[i].toX, JSdrawablelist[0].paths[i].toY, JSdrawablelist[0].paths[i].returnNumber);
}
}
});
var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
答案 0 :(得分：0)
我自己找到了答案，这可能对某人有用
我刚刚添加了modal和div的附加代码。
var canvas = document.getElementById("myCanvas");
div = document.getElementById("myCanvasDiv");
canvas.style.position = "absolute";
canvas.style.border = "1px solid";
div.appendChild(canvas);
$('#diffMyXML').modal("show");