Как плавно перетащить изображение в android веб-просмотра - PullRequest
Новая
       86

Как плавно перетащить изображение в android веб-просмотра

1 голос
/ 15 января 2020

У меня есть два изображения на холсте. Я должен вращать круги по центру только путем перетаскивания пальца по соответствующим сторонам холста. Я попытался переместить круги, используя событие touchmove. Но это не соответствует скорости вращения пальца, так как мне приходится проходить угол (задайте заданные значения c). Как я могу плавно перемещать круги, сопоставляя скорость пальца? Вот что я пробовал:

HTML

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title of the document</title>
</head>

<body>
<canvas id="canvas" style="border:solid 1px black;position:absolute;top:30px;left:0px;"></canvas>
<button id='clockwiseBtn'>Wheel1</button>
<button id='antiClockwiseBtn'>Wheel2</button>

<script src="main.js"></script>
</body>

</html>

JS

const wheelImg = new Image;
wheelImg.src = "wheel.png";
//canvas.width = innerWidth - 30;
//canvas.height = innerHeight - 40;
canvas.width =  600;
canvas.height = 300;
const ctx = canvas.getContext("2d");
const wheelScale = 0.4;  // scales the wheels
const rotateCount = 1; // frames (@60 per second)
var activeWheelCount = 0; // to track if any wheels are active
var myXPos = canvas.width/2, myYPos = canvas.height/2;

// when the image has loaded set up click events and draw the first frame
wheelImg.addEventListener("load",() => {
    requestAnimationFrame(mainLoop)
    clockwiseBtn.addEventListener("click",() => wheels[0].start(Math.PI / 2));
    antiClockwiseBtn.addEventListener("click",() => wheels[1].start(-Math.PI / 2));
     canvas.addEventListener("touchmove",moveWheel,true);
     canvas.addEventListener("touchstart",startWheel,true);
     canvas.addEventListener("touchend",endWheel,true);
    }
    ,{once:true}
);

function startWheel(e){
  e.preventDefault();

  myXPos = canvas.width/2;
  myYPos = canvas.height/2
}

function endWheel(e){
  e.preventDefault();

  myYPos = e.touches[0].pageY;
  myXPos = e.touches[0].pageX;
}

 function moveWheel(e){
   e.preventDefault();


   if(e.touches[0].pageX < canvas.width/2 && e.touches[0].pageY < canvas.height/2){ // 1st quadrant
      if(myXPos < e.touches[0].pageX && myYPos < e.touches[0].pageY){
        console.log("1 left to right and up to down ",myXPos, e.touches[0].pageX, myYPos , e.touches[0].pageY);
        wheels[0].start(Math.PI/72);
      }else if(myXPos < e.touches[0].pageX && myYPos > e.touches[0].pageY){
        console.log("2 left to right and down to up ",myXPos, e.touches[0].pageX, myYPos , e.touches[0].pageY);
        wheels[0].start(Math.PI/72);
      }else if(myXPos > e.touches[0].pageX && myYPos < e.touches[0].pageY){
        console.log("3 right to left and up to down ",myXPos, e.touches[0].pageX, myYPos , e.touches[0].pageY);
        wheels[0].start(-Math.PI/72);
      }else if(myXPos > e.touches[0].pageX && myYPos > e.touches[0].pageY){
        console.log("4 right to left and down to up ",myXPos, e.touches[0].pageX, myYPos , e.touches[0].pageY);
        wheels[0].start(-Math.PI/72);
      }
      myXPos = e.touches[0].pageX;
      myYPos = e.touches[0].pageY;
   }else if(e.touches[0].pageX < canvas.width/2 && e.touches[0].pageY > canvas.height/2){// 3rd quadrant
      if(myXPos < e.touches[0].pageX && myYPos < e.touches[0].pageY){
        console.log("5 left to right and up to down ",myXPos, e.touches[0].pageX, myYPos , e.touches[0].pageY);
        wheels[0].start(-Math.PI/72);
      }else if(myXPos < e.touches[0].pageX && myYPos > e.touches[0].pageY){
        console.log("6 left to right and down to up ",myXPos, e.touches[0].pageX, myYPos , e.touches[0].pageY);
        wheels[0].start(-Math.PI/72);
      }else if(myXPos > e.touches[0].pageX && myYPos < e.touches[0].pageY){
        console.log("7 right to left and up to down ",myXPos, e.touches[0].pageX, myYPos , e.touches[0].pageY);
        wheels[0].start(Math.PI/72);
      }else if(myXPos > e.touches[0].pageX && myYPos > e.touches[0].pageY){
        console.log("8 right to left and down to up ",myXPos, e.touches[0].pageX, myYPos , e.touches[0].pageY);
        wheels[0].start(Math.PI/72);
      }
      myXPos = e.touches[0].pageX;
      myYPos = e.touches[0].pageY;
   }else if(e.touches[0].pageX > canvas.width/2 && e.touches[0].pageY < canvas.height/2){ // 2nd quadrant
      if(myXPos < e.touches[0].pageX && myYPos < e.touches[0].pageY){
        console.log("9 left to right and up to down ",myXPos, e.touches[0].pageX, myYPos , e.touches[0].pageY);
        wheels[1].start(Math.PI/72);
      }else if(myXPos < e.touches[0].pageX && myYPos > e.touches[0].pageY){
        console.log("10 left to right and down to up ",myXPos, e.touches[0].pageX, myYPos , e.touches[0].pageY);
        wheels[1].start(Math.PI/72);
      }else if(myXPos > e.touches[0].pageX && myYPos < e.touches[0].pageY){
        console.log("11 right to left and up to down ",myXPos, e.touches[0].pageX, myYPos , e.touches[0].pageY);
        wheels[1].start(-Math.PI/72);
      }else if(myXPos > e.touches[0].pageX && myYPos > e.touches[0].pageY){
        console.log("12 right to left and down to up ",myXPos, e.touches[0].pageX, myYPos , e.touches[0].pageY);
        wheels[1].start(-Math.PI/72);
      }
      myXPos = e.touches[0].pageX;
      myYPos = e.touches[0].pageY;
   }else{// 4th quadrant
      if(myXPos < e.touches[0].pageX && myYPos < e.touches[0].pageY){
        console.log("13 left to right and up to down ",myXPos, e.touches[0].pageX, myYPos , e.touches[0].pageY);
        wheels[1].start(-Math.PI/72);
      }else if(myXPos < e.touches[0].pageX && myYPos > e.touches[0].pageY){
        console.log("14 left to right and down to up ",myXPos, e.touches[0].pageX, myYPos , e.touches[0].pageY);
        wheels[1].start(-Math.PI/72);
      }else if(myXPos > e.touches[0].pageX && myYPos < e.touches[0].pageY){
        console.log("15 right to left and up to down ",myXPos, e.touches[0].pageX, myYPos , e.touches[0].pageY);
        wheels[1].start(Math.PI/72);
      }else if(myXPos > e.touches[0].pageX && myYPos > e.touches[0].pageY){
        console.log("16 right to left and down to up ",myXPos, e.touches[0].pageX, myYPos , e.touches[0].pageY);
        wheels[1].start(Math.PI/72);
      }
      myXPos = e.touches[0].pageX;
      myYPos = e.touches[0].pageY;
   }

 }

// defines a single wheel
const wheel = (x,y,rot) => ({
    x,y,rot,
    rotTarget: rot,
    counter: 0,
    start(ang) {   // command a wheel to turn
      if (!this.counter ) {  // make sure not already turning
          this.counter = rotateCount;
          this.rotTarget += ang;
          if (!activeWheelCount) { requestAnimationFrame(mainLoop) } // start the
                                                                     // animation is no wheel
                                                                     // is active
          activeWheelCount ++;
      }
    },
    update() {  // update the wheel animation counter
        this.counter += this.counter > 0 ? -1 : 0;
        if (this.counter === 0) {  this.rot = this.rotTarget }
        else { activeWheelCount += 1 } // count this wheel as an active wheel
    },
    draw() { // draw the wheel
        const r = (1 - (this.counter / rotateCount))  * (this.rotTarget - this.rot) + this.rot;
        ctx.setTransform(wheelScale, 0, 0, wheelScale, this.x, this.y);
        ctx.rotate(r);
        ctx.drawImage(wheelImg, -wheelImg.width / 2, -wheelImg.height / 2, wheelImg.width, wheelImg.height);
        console.log("Inside draw ",this.x);
        ctx.font = " 30px Arial";
        if(this.x < 300){

          ctx.fillText("Text1",wheelImg.width/2,5);
        }else{

          ctx.fillText("Text9",wheelImg.width/2,5);
        }


    }
});
const wheels = [wheel(canvas.width/2-110,110, 0), wheel(canvas.width/2+110,110,0)]; // create two wheels

function mainLoop() {  // animates wheels
    activeWheelCount = 0;
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.clearRect(0,0,ctx.canvas.width, ctx.canvas.height);
    wheels.forEach(wheel => wheel.update());
    wheels.forEach(wheel => wheel.draw());
    if (activeWheelCount) {
        requestAnimationFrame(mainLoop);
    }
}

ANDROID CODE 

package com.example.rotationsample;

import androidx.appcompat.app.AppCompatActivity;

import android.content.pm.ActivityInfo;
import android.os.Bundle;
import android.webkit.WebChromeClient;
import android.webkit.WebView;

public class MainActivity extends AppCompatActivity {

    WebView wbView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
        wbView = (WebView)findViewById(R.id.myWebview);
        wbView.getSettings().setJavaScriptEnabled(true);
        wbView.setWebChromeClient(new MyWebChromeClient());
        wbView.loadUrl("file:///android_asset/index.html");
    }
}


package com.example.rotationsample;

import android.util.Log;
import android.webkit.ConsoleMessage;
import android.webkit.WebChromeClient;

class MyWebChromeClient extends WebChromeClient
{
    @Override
    public boolean onConsoleMessage(ConsoleMessage cm)
    {
        Log.d("CONTENT", String.format("%s @ %d: %s",
                cm.message(), cm.lineNumber(), cm.sourceId()));
        return true;
    }
}

Это скриншот изображения: screenshot

...