>source

문제는 새로 열린 모달 창에 도형을 배치 할 수 없습니다.

저는 웹 기술 코딩의 초보자입니다. 해결책이 너무 간단 할 수도 있지만 3 일 동안 찾을 수 없었습니다.

인덱스 html이 있고 그 안에 diff 버튼이 있습니다. 버튼을 클릭하면 업로드 된 XML에서 오는 처리 흐름 모양을 그립니다.

XML을 업로드했는데 컨트롤러에서 XML을 가져와 그릴 좌표를 올바르게 응답했습니다. 그러나 모달 창이 아닌 버튼 아래의 색인 페이지에 모양을 그립니다.

모달에 모양을 배치하기 위해 많은 것을 시도했지만 할 수 없었습니다.

미리 감사합니다.

샘플 모양

index.html
<!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>

canvas.js
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();
}

controller.js
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');
  };
};


  • 답변 # 1

    직접 답을 찾았습니다. 누군가에게 유용 할 수 있습니다

    모달과 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");
    
    

  • 이전 c# - xamarinforms에서 한 번에 여러 권한을 표시하는 방법은 무엇입니까?
  • 다음 javascript - Chrome에서 Roboto 글꼴로드 문제를 해결하는 방법은 무엇입니까?