python - 使用RapydScript使用Python和DOM进行简单的图像旋转

我的这段代码是用Python编写的，可以与Brython一起正常工作。
此代码在这种情况下将图像旋转为嵌齿轮。
我该如何更改？如何与RapydScript一起使用？我是编程新手，请耐心：D

<!DOCTYPE html>
<html>
<head>

<!-- load Brython -->
<script src="http://brython.info/src/brython_dist.js"></script>


<!-- the main script; after loading, Brython will run all 'text/python3' scripts -->
<script type='text/python'>
from browser import window, timer, document, html
import time

<!-- I know that here, I must use this t0 = Date.now() -->

t0 = time.time()


def user_agent():
   """ Helper function for determining the user agent """
   if window.navigator.userAgent.find('Chrome'):
       return 'chrome'
   elif window.navigator.userAgent.find('Firefox'):
       return 'firefox'
   elif window.navigator.userAgent.find('MSIE'):
       return 'msie'
   elif window.navigator.userAgent.find('Opera'):
       return 'opera'

# Dict Mapping UserAgents to Transform Property names
rotate_property = {
   'chrome':'WebkitTransform',
   'firefox':'MozTransform',
   'msie':'msTransform',
   'opera':'OTransform'
}

degrees = 0
def animation_step(elem_id):
   """ Called every 30msec to increase the rotatation of the element. """
   global degrees, tm

   # Get the right property name according to the useragent
   agent = user_agent()
   prop = rotate_property.get(agent,'transform')

   # Get the element by id
   el = document[elem_id]

   # Set the rotation of the element
   setattr(el.style, prop, "rotate("+str(degrees)+"deg)")
   document['status'].innerHTML = "rotate("+str(degrees)+" deg)"


   # Increase the rotation
   degrees += 1
   if degrees > 360:
       # Stops the animation after 360 steps
       timer.clear_interval(tm)
       degrees = 0

# Start the animation
tm = timer.set_interval(lambda id='img1':animation_step(id),30)

document['status3'].innerHTML = "Time of execution python code("+str(time.time()-t0)+" ms)"

<!-- I know that here i must use this: "Time of execution python code", Date.now()-t0, "ms") -->
</script>

</head>

<!-- After the page has finished loading, run bootstrap Brython by running
     the Brython function. The argument '1' tells Brython to print error
     messages to the console. -->
<body onload='brython(1)'>

<img id="img1" src="cog1.png" alt="cog1">
<script>animation_step("img1",30);</script>
<h2 style="width:200px;" id="status"></h2>
<h2 style="width:800px;" id="status3"></h2>


</body>
</html>

最佳答案

我对Brython不太熟悉，但是马上我可以告诉你，要将其移植到RapydScript，您只需要删除我看到的代码导入中的大多数不必要的抽象，因为RapydScript更接近于本机JavaScript。至于在浏览器中具有RapydScript代码，您有两个选择：

（建议）提前编译代码，并将.js文件包含在html中（类似于Babel，UglifyJS等），这样，代码将运行得更快，并且不需要您在页面中包含编译器
使用浏览器内的RapydScript编译器（如果您不想修改编译，则为最新版本：https://github.com/adousen/RapydScript-pyjTransformer），并在<script type="text/pyj">标记内包含与您所做的类似的代码在这个例子中。

现在，假设您选择了上面推荐的选项，那么下一步就是从代码中删除Brython样板，这就是您在RapydScript中的逻辑样子（请注意，我也对其进行了重构，删除了不必要的两级旋转方法解析和不需要的lambda调用）：

t0 = Date.now()

def rotate_property():
   """ Helper function mapping user agents to transform proeprty names """
   if 'Chrome' in window.navigator.userAgent: return 'webkitTransform'
   elif 'Firefox' in window.navigator.userAgent: return 'MozTransform'
   elif 'MSIE' in window.navigator.userAgent: return 'msTransform'
   elif 'Opera' in window.navigator.userAgent: return 'OTransform'
   return 'transform'

degrees = 0
def animation_step(elem_id='img1'):
   """ Called every 30msec to increase the rotatation of the element. """
   nonlocal degrees

   # Get the right property name according to the useragent
   prop = rotate_property()

   # Get the element by id
   el = document.getElementById(elem_id)

   # Set the rotation of the element
   el.style[prop] = "rotate(" + degrees + "deg)"
   document.getElementById('status').innerHTML = "rotate(" + degrees + "deg)"

   # Increase the rotation
   degrees += 1
   if degrees > 360:
       # Stops the animation after 360 steps
       clearInterval(tm)
       degrees = 0

# Start the animation
tm = setInterval(animation_step, 30)
document.getElementById('status3').innerHTML = "Time of execution python code(" + (Date.now() - t0) + " ms)"

注意事项：

不再需要导入，RapydScript不需要样板即可与JavaScript进行交互
Pythonic timer.set_interval和timer.clear_interval已替换为JavaScript等效项（setInterval和clearInterval）
您在我的代码中看到的document是DOM本身，在Brython代码中的document是它的包装，因此访问它的方式有些不同
RapydScript很久以前就放弃了global，而赞成使用Python 3更安全的nonlocal，这是我在代码中使用的
RapydScript可以直接访问JavaScript的time类，而不是Date模块，我在代码中使用了该类来计时
我还建议将prop = rotate_property()调用移到函数外部，因为用户代理不会在函数调用之间进行更改（在这种情况下，该操作相对便宜，但是对于更复杂的逻辑，这将提高您的性能）
您似乎正在通过正文onload从HTML启动Brython，请删除该内容以及显示<script>animation_step("img1",30);</script>的行，只要页面加载受setInterval调用，上述代码就会自动为您触发
由于RapydScript使用Unicode字符来避免名称冲突，因此您需要通过将以下行添加到头部来告诉HTML将文档视为Unicode：<meta charset="UTF-8">
供以后参考，您对RapydScript的onload调用均无效，因为与Brython不同，RapydScript在自己的范围内保护自身，这种范围对于外部是不可见的（很长一段时间以来，这在JavaScript世界中都是公认的惯例），您可以选择使onload工作的原因是：

（不建议）使用-b标志编译文件以忽略自我保护范围
（推荐）在代码内部，如果希望从外部访问它们，请将函数附加到全局window对象

然后，调用上述代码的编译版本的实际html代码将如下所示：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<img id="img1" src="cog1.png" alt="cog1">
<h2 style="width:200px;" id="status"></h2>
<h2 style="width:800px;" id="status3"></h2>
<script src="myfile.js"></script>
</body>
</html>

关于python - 使用RapydScript使用Python和DOM进行简单的图像旋转，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39689555/