我试图弄清楚是否有可能在SAPUI5中使用JavaScript绘制一些东西，例如画一个圆圈，然后将它围绕屏幕移动到我想要的位置？
我不是真正的JS开发人员，而是Java。所以我真的不知道应该尝试什么，说实话，查看一些信息，但没有找到任何东西。
编辑：
我不想使用HTML，只需要JS，XML和CSS。
新编辑：
哦，我找到了可以解决我的问题的东西，需要更多的测试。您可以在XML中添加一些html，如下所示：
<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>");
}
就这一点，我们准备好了Canvas，现在我们只需要在其中添加一些东西，为此，我刚创建一个按钮，按下后，将执行以下操作：
onPress: function () {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillRect(25, 25, 100, 100);
}
提前致谢。
干杯！！！
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>
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。