0

如何在 GWT 中使用这个简单的 js 函数？（以图片动画脚本为例）

<script type="text/javascript">
var cSpeed=4;
var cWidth=64;
var cHeight=64;
var cTotalFrames=8;
var cFrameWidth=64;
var cImageSrc='images/sprites.gif';

var cImageTimeout=false;
var cIndex=0;
var cXpos=0;
var cPreloaderTimeout=false;
var SECONDS_BETWEEN_FRAMES=0;

function startAnimation(){

    document.getElementById('loaderImage').style.backgroundImage='url('+cImageSrc+')';
    document.getElementById('loaderImage').style.width=cWidth+'px';
    document.getElementById('loaderImage').style.height=cHeight+'px';

    //FPS = Math.round(100/(maxSpeed+2-speed));
    FPS = Math.round(100/cSpeed);
    SECONDS_BETWEEN_FRAMES = 1 / FPS;

    cPreloaderTimeout=setTimeout('continueAnimation()', SECONDS_BETWEEN_FRAMES/1000);

}

function continueAnimation(){

    cXpos += cFrameWidth;
    //increase the index so we know which frame of our animation we are currently on
    cIndex += 1;

    //if our cIndex is higher than our total number of frames, we're at the end and should restart
    if (cIndex >= cTotalFrames) {
        cXpos =0;
        cIndex=0;
    }

    if(document.getElementById('loaderImage'))
        document.getElementById('loaderImage').style.backgroundPosition=(-cXpos)+'px 0';

    cPreloaderTimeout=setTimeout('continueAnimation()', SECONDS_BETWEEN_FRAMES*1000);
}

function stopAnimation(){//stops animation
    clearTimeout(cPreloaderTimeout);
    cPreloaderTimeout=false;
}

function imageLoader(s, fun)//Pre-loads the sprites image
{
    clearTimeout(cImageTimeout);
    cImageTimeout=0;
    genImage = new Image();
    genImage.onload=function (){cImageTimeout=setTimeout(fun, 0)};
    genImage.onerror=new Function('alert(\'Could not load the image\')');
    genImage.src=s;
}

//The following code starts the animation
new imageLoader(cImageSrc, 'startAnimation()');

尝试包装

    public static native void anim()
/*-{
   js here
}-*/;

但未捕获的 ReferenceError: startAnimation 未定义

我看过 http://www.gwtproject.org/doc/latest/DevGuideCodingBasicsJSNI.html 但没有找到 js 函数的示例

4

2 回答 2

1

您需要添加 $wnd 以访问直接包含在您的 HTML 主机页面中的 JavaScript。

$wnd.startAnimation();
于 2016-08-29T01:19:55.693 回答
0

您可以使用 JSNI：

方法 1：如果你总是用 调用 imageLoader fun = 'startAnimation()'，我的意思是，你总是这样使用 imageLoader：imageLoader(s, 'startAnimation()');

class YourMethods
{
    public static native void imageLoader(String s) /*-{
    imageLoader(s, 'startAnimation()');
    }-*/;
}

你可以像这样调用这个方法：

YourMethods::imageLoader(s);

方法2：如果您fun更改参数（并不总是'startAnimation()'），但始终是类型字符串

class YourMethods
{
    public static native void imageLoader(String s, String fun) /*-{
    imageLoader(s, fun);
    }-*/;
}

在这种情况下：您定义第二个参数，如“函数的 javascript 名称”，并以这种方式调用它：

YourMethods::imageLoader(s, "startAnimation()");

GWT 理解有趣的参数，如 javascript 函数的名称，并输入字符串

方法 3：将所有 javascript 代码转换为 GWT

于 2016-08-29T00:20:04.527 回答