安卓画布冻结

Question

我有一个在canvas中运行的javascript应用程序。它在安卓设备上工作正常，但当你用手指在屏幕上拖动时，整个网页会冻结。有没有办法防止这种情况发生？

- Joel

---

如果你用一个透明的div覆盖canvas，问题是否仍然存在？这样可以看出是对canvas元素的触摸引起了问题。 - GillesC

我会在回家后尝试，但我认为问题与屏幕尝试滚动/缩放有关。即使我将手指拖到画布之外，它也会锁定。 - Joel

也许你有一些不必要的 event.preventDefault() 调用？ - antyrat

你的 JavaScript 代码中，在 touchHandler 函数中有一些不必要的 event.preventDefault(); 和 event.stopPropagation();。 - judgement

Answer 1

你提出的问题信息不够详细。Web应用程序在获取Android的全部功能方面存在一些限制。你的陈述“我有一个在画布中运行的JavaScript应用程序”，乍一看似乎你在应用程序中使用了Android画布。这里有一个链接，可以帮助你在Android上运行HTML5画布。请点击此处。

- dharmendra

Answer 2

这取决于您在 MotionEvent.ACTION_DOWN 和 MOVE 中的代码操作... 您应该有一些绘制画布的例程。该例程不应被任何其他例程中断。

不确定这是否可以解决您的问题或提供任何见解，但是让我们来看看；

例如；

 protected void onDraw(Canvas canvas) {
  // fills the canvas with black
  canvas.drawColor(Color.BLACK);
  // draw some stuff on it
  backGnd.draw(canvas);  
  basket.draw(canvas);
  for (int i = 0; i < AppleList.size();i++){
      AppleList.get(i).draw(canvas);
  }  
 }

MotionEvent 的处理方式如下（请注意代码中的注释！）；

 @Override
 public boolean onTouchEvent(MotionEvent event) {

 if (!isTouchDisabled){
      if (event.getAction() == MotionEvent.ACTION_DOWN) {

        // add code to pass the action down to the objects
           basket.handleActionDown((int)event.getX(), (int)event.getY());
          }

          if (event.getAction() == MotionEvent.ACTION_MOVE) {
           // the gestures

        // only pass the move events to the objects that were previously touched (so action down entails checking for
        // the location of the touch AND the object.. if they match, you set isTouched to true.

        if (basket.isTouched()) {
            // the basket was picked up and is being dragged
            basket.setX((int)event.getX());
            basket.setY((int)event.getY());

           }
          }

          if (event.getAction() == MotionEvent.ACTION_UP) {
           // Check buttons
              if (btnMoreFruit.isTouched()){
                  btnMoreFruit.handleActionUp((int) event.getX(), (int) event.getY());
                  btnMoreFruit.setTouched(false);
              }
              if (btnLessFruit.isTouched()){
                  btnLessFruit.handleActionUp(this.getContext(), (int)event.getX(), (int)event.getY());
                  btnLessFruit.setTouched(false);
              }

          }
 }

- Kees Koenen

---

我正在尝试编写可在Android浏览器中运行的Javascript。除非我真的错过了什么，否则您给我提供的是在Android应用程序中运行的Java。如果我正在编写应用程序，那么这个问题将非常容易解决。 - Joel

啊..抱歉，我没听懂。在这方面我无法帮助你。你尝试过不同的浏览器了吗？（如火狐、欧朋、海豚浏览器）只是为了检查和确定根本原因？ - Kees Koenen

我尝试了我的Kindle Fire上的所有可能方法，但好像没有一个方法能够完全解决问题，尽管其中一些方法比其他方法要好。我不认为有可能修复这个问题，但是我想放出一些赏金，看看是否有人有神奇的解决方案。对于Web应用程序来说，这确实是一个重大问题。 - Joel

那么为什么不构建一个真正的 Android 应用程序，而不是 Web 应用程序呢？ - Kees Koenen

我们正在开发一些Android应用，但如果我能让一些现有的HTML5页面在Android上运行就太好了。很令人沮丧的是，除了这一个问题，其他所有东西都能正常工作。 - Joel

Answer 3

Android 在处理画布和 JavaScript 方面表现得相当糟糕。可能这也是它经常会出现卡顿的原因。

http://www.youtube.com/watch?v=yDrPNXnH-rg

- Tomaz77

Answer 4

根据您的代码内容，当用户在画布上拖动手指（或鼠标）时，可能会进行大量处理。例如，在绘画应用程序中，每次用户焦点的XY位置更改像素时都会被捕获。如果这些微小事件中的每个代码不轻便，客户端将在尝试追赶时挂起。

- Chad Hedgcock

---

当手指拖动时，没有额外的代码运行。代码继续正常运行，只是不会重新绘制画布。 - Joel