Question

假设我们有一个h1文本，并且我们希望将它与DOJO一起移动到一个新位置，并带有翻译动画。我们希望新的h1具有相同的y坐标（从顶部开始的高度），但向右移动200像素。

fx.slideTo 应该完成这项工作：

var greetingNode = dom.byId("greeting");
var obj = domGeom.position(greetingNode, true);
fx.slideTo({
    node: greeting,
    top: obj.y, //pseudocode; obj[1]? obj.Y?
    left: obj.x + X //pseudocode; obj[0]? obj.X?
}).play();

我无法正确访问obj 。此外，如果我打印文本坐标，它们似乎是x：8和y：21.43周期性。你能告诉我这个吗？

ps：html.coords可以完美运行，但不推荐使用，DOJO文档建议使用dojo.position。

此处填写完整代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>

<!-- set Dojo configuration, load Dojo -->
<script>
    dojoConfig= {
        has: {
            "dojo-firebug": true,
            "dojo-debug-messages": true
        },
        async: true
    };
</script>

<!-- load Dojo -->
<script src="dojo/dojo.js"
        data-dojo-config="async: true"></script>            

<script>
    require([
        "dojo/dom-geometry",
        "dojo/dom",
        "dojo/dom-style",
        "dojo/fx",
        "dojo/dom-construct",
        "dojo/json",
        /*'dojo/_base/html',*/ //required for deprecated html.coords
        "dojo/domReady!"
    ], function (domGeom, dom, style, fx, domConstruct, JSON) {
        var greetingNode = dom.byId("greeting");
        domConstruct.place("<em> Dojo!</em>", greetingNode);
        greeting.innerHTML += " from Dojo!";

        /* coords module is deprecated! use position instead
        var coords = html.coords(greetingNode);*/

        var obj = domGeom.position(greetingNode, true);
        dom.byId("divcoordinates").innerHTML = JSON.stringify(obj);

        fx.slideTo({
            node: greeting,
            top: ? //works with coords.y
            left: ? //works with coords.x + 200
        }).play();
    });

</script>

</head>
<body>
    <h1 id="greeting">Hello</h1>
    <div id="divcoordinates">div coordinates:</div>
</body>
</html>

Answer 1

我认为你在做什么没有任何问题。得到x：8和y：21.43的结果是浏览器设置的默认margin。尝试将其重置为0px并清除问题。

HTML default body margin

此外，如果您不想更改高度，请不要更新top中的fx.slideTo值。

以下是更新的样本：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
  <style>
    body, h1{
      margin:0px
    }
  </style>
<!-- set Dojo configuration, load Dojo -->
<script>
    dojoConfig= {
        has: {
            "dojo-firebug": true,
            "dojo-debug-messages": true
        },
        async: true
    };
</script>
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.8/dojo/dojo.js"></script>

<!-- load Dojo 
<script src="dojo/dojo.js"
        data-dojo-config="async: true"></script>       -->     

<script>
    require([
        "dojo/dom-geometry",
        "dojo/dom",
        "dojo/dom-style",
        "dojo/fx",
        "dojo/dom-construct",
        "dojo/json",
        /*'dojo/_base/html',*/ //required for deprecated html.coords
        "dojo/domReady!"
    ], function (domGeom, dom, style, fx, domConstruct, JSON) {
        var greetingNode = dom.byId("greeting");
        domConstruct.place("<em> Dojo!</em>", greetingNode);
        greetingNode.innerHTML += " from Dojo!";

        /* coords module is deprecated! use position instead
        var coords = html.coords(greetingNode);*/
        var obj = domGeom.position(greetingNode, true);
        dom.byId("divcoordinates").innerHTML = JSON.stringify(obj);
      
        fx.slideTo({
            node: greetingNode,
            //top: obj.y, //works with coords.y
            left: obj.x + 200 //works with coords.x + 200
        }).play();
      
    });

</script>

</head>
<body>
    <h1 id="greeting">Hello</h1>
    <div id="divcoordinates">div coordinates:</div> 
</body>
</html>

如何用DOJO将文本翻译成相对位置？

1 个答案: