Можно ли нарисовать объект в SAPUI5? - PullRequest
Новая
       30

Можно ли нарисовать объект в SAPUI5?

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

Я пытаюсь выяснить, возможно ли нарисовать что-то в SAPUI5, используя JavaScript, например, нарисовать круг, а затем переместить его по экрану в нужное мне положение?

Я не разработчик JS, но Java.Так что я действительно не знаю, что мне следует попробовать, если честно, проверить некоторую информацию, и ничего не нашел.

РЕДАКТИРОВАТЬ:

Я неЯ хочу использовать HTML, просто JS, XML и CSS, если необходимо.

НОВОЕ РЕДАКТИРОВАНИЕ:

Окей, я нашел что-то, что может решить мою проблему, нужно больше тестировать.Вы можете добавить html в ваш XML, например, так: 

    <core:HTML id="html"></core:HTML>

Как только у нас будет этот HTML в нашем XML, мы можем добавить к нему контент, в JS, это будет выглядеть так: 

onInit: function () {
        this.getView().byId("html").setContent(
            "<canvas id='myCanvas' width='400' height='200' class='signature-pad' style='border:1px solid;'></canvas>");
    }

Как раз с этим у нас есть готовый Canvas, теперь нам просто нужно что-то добавить в него, для этого, я просто создал кнопку, при нажатии на нее произойдет следующее: 

onPress: function () {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.fillRect(25, 25, 100, 100);
    }

Я сейчас пытаюсь переместить квадрат вокруг холста.Когда я закончу эту часть, я приду, чтобы добавить код.

Заранее спасибо.

Приветствия !!!

Франсиско Донэйр.

1 Ответ

1 голос
/ 01 апреля 2019

Вы можете использовать SVG для рисования круга или другого объекта в абсолютном div.Затем оживите этот div с помощью js.Я еще не пробовал, но я думаю, что мы можем использовать WebGL для более сложных рисунков.

HTML 

<!DOCTYPE html>
<title>SAPUI5</title>
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m" data-sap-ui-bindingSyntax="complex" data-sap-ui-compatVersion="edge" data-sap-ui-preload="async"></script>

<script id="myView" type="ui5/xmlview">
  <mvc:View controllerName="MyController" xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
  xmlns:layout="sap.ui.commons.layout">

    <layout:MatrixLayout>
        <layout:rows>
        <layout:MatrixLayoutRow>
            <layout:MatrixLayoutCell backgroundDesign="Fill1" padding="None">
                <Button text="Test Button" width="100%"/>
            </layout:MatrixLayoutCell>
          <layout:MatrixLayoutCell backgroundDesign="Fill2">
                <Button text="Test Button2" />
            </layout:MatrixLayoutCell>
        </layout:MatrixLayoutRow>
        <layout:MatrixLayoutRow>
            <layout:MatrixLayoutCell backgroundDesign="Fill3">
                <Button text="Test Button3" />
            </layout:MatrixLayoutCell>
          <layout:MatrixLayoutCell backgroundDesign="Plain">
                <Button text="Test Button4" />
            </layout:MatrixLayoutCell>
        </layout:MatrixLayoutRow>
      </layout:rows>
    </layout:MatrixLayout>


  </mvc:View>
</script>

<body class="sapUiBody">
  <div id="content"></div>
  <div class="circle" style="position: absolute;top:0">
    <svg height="100" width="100">
      <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="transparent" />
    </svg>
  </div>
</body>

Дж 

 sap.ui.getCore().attachInit(function() {
   "use strict";
   sap.ui.controller("MyController", {
     onInit: function() {
        animateDiv('.circle');
     }
   });
   sap.ui.xmlview({
     viewContent: jQuery("#myView").html()
   }).placeAt("content");

 });

function makeNewPosition(){

  // Get viewport dimensions (remove the dimension of the div)
  var h = $(window).height() - 50;
  var w = $(window).width() - 50;

  var nh = Math.floor(Math.random() * h);
  var nw = Math.floor(Math.random() * w);

  return [nh,nw];    

}

function animateDiv(myclass){
  var newq = makeNewPosition();
  $(myclass).animate({ top: newq[0], left: newq[1] }, 1000,   function(){
    animateDiv(myclass);        
  });

};

Рабочий пример здесь .

...