Question

我正在尝试找出是否有可能使用JavaScript在SAPUI5中绘制某些内容，例如绘制一个圆圈，然后将其在屏幕上移动到我想要的位置？

我不是真正的JS开发人员，而是Java。因此，老实说，我真的不知道该怎么办，请查看一些信息，却什么也没找到。

编辑：

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

新编辑：

Okey，我发现了一些可以解决我的问题的东西，需要更多的测试。您可以像这样将一些html添加到XML中：

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

一旦我们在XML上有了HTML，就可以在JS中向其中添加内容，如下所示：

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

就这样，我们已经准备好画布，现在我们只需要在其中添加一些内容，为此，我刚刚创建了一个按钮，按下该按钮即可执行以下操作：

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

我现在正在尝试在画布上移动正方形。我完成了这一部分，我将添加代码。

谢谢。

干杯！

Francisco Donaire。

Answer 1

您可以使用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>

Js

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

};

工作示例here。

可以在SAPUI5中绘制对象吗？

我现在正在尝试在画布上移动正方形。我完成了这一部分，我将添加代码。

1 个答案: