Javascript 可以在SAPUI5中绘制对象吗？_Javascript_Sapui5_Draw_Sap Fiori

Javascript 可以在SAPUI5中绘制对象吗？

javascript sapui5

Javascript 可以在SAPUI5中绘制对象吗？,javascript,sapui5,draw,sap-fiori,Javascript,Sapui5,Draw,Sap Fiori,我想知道是否可以在SAPUI5中使用JavaScript绘制一些东西，比如，画一个圆，然后在屏幕上移动到我想要的位置我不是一个真正的JS开发人员，而是Java。所以我真的不知道我应该尝试什么，老实说，检查一些信息，但没有找到任何东西编辑：我不想使用HTML，必要时只使用JS、XML和CSS 新编辑：好的，我发现了一些可能解决我问题的方法，需要更多的测试。您可以向XML中添加一些html，如下所示： <core:HTML id="html"></core:HT

我想知道是否可以在SAPUI5中使用JavaScript绘制一些东西，比如，画一个圆，然后在屏幕上移动到我想要的位置

我不是一个真正的JS开发人员，而是Java。所以我真的不知道我应该尝试什么，老实说，检查一些信息，但没有找到任何东西

编辑：

我不想使用HTML，必要时只使用JS、XML和CSS

新编辑：

好的，我发现了一些可能解决我问题的方法，需要更多的测试。您可以向XML中添加一些html，如下所示：

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

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

我现在试着在画布上移动正方形。一旦我完成那部分，我就来添加代码。提前谢谢

干杯

Francisco Donaire。

您可以使用SVG在绝对div中绘制圆形或其他对象。然后使用js为该div设置动画。我还没有尝试，但我认为我们可以使用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);        
  });

};

工作示例。

可能尝试，然后尝试移动它，以防出现问题更新您的问题？抱歉，我尝试画一个圆圈，但似乎SAPUI5上没有用于此的库…感谢您的回答@mkysoft，我忘了包括我不想使用HTML，我只是使用XML、JS和CSS。。。我很抱歉！您可以使用js创建动态html元素。我需要对xml视图进行深入搜索。这可能会有所帮助：嗯，这不是我要找的，但谢谢！我会继续寻找解决方案，如果我发现了什么，我会回来的！

 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);        
  });

};