Как нарисовать мои фигуры в открытом модальном окне - PullRequest
Новая
       20

Как нарисовать мои фигуры в открытом модальном окне

0 голосов
/ 19 апреля 2019

Проблема не в том, чтобы поместить фигуру во вновь открытое модальное окно.

Я новичок в веб-технологиях. Так что, может быть, решение так просто, но я не мог найти его в течение трех дней.

У меня есть индекс html, в нем есть кнопка diff, она должна нажимать на кнопку, она рисует форму потока обработки, полученную из загруженного 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 Ответ

0 голосов
/ 27 мая 2019

Я нашел ответ сам, это может кому-то пригодиться

Просто я добавил код дополнения для 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");
...