Puppeteer: 鼠標移動

時間 2019-11-26

原文原文鏈接

mouse.click 是 mouse.move，mouse.down 和 mouse.up 的快捷方式canvas

main.js

const pptr = require('puppeteer');
const gotoUrl = 'http://127.0.0.1:5500/index.html';

(async () => {
  const browser = await pptr.launch({
    headless: false,
    slowMo: 250,
  });
  const page = await browser.newPage();

  page.on('console', msg => {
    console.log(msg.text());
  });
  await page.goto(gotoUrl);

  await page.mouse.move(100, 100);

  await page.mouse.down();
  await page.mouse.move(200, 100, {
    steps: 3,
  });
  await page.mouse.move(200, 200);
  await page.mouse.move(100, 200);
  await page.mouse.move(100, 100);
  await page.mouse.up();

  await page.mouse.move(150, 150);
  await page.mouse.down();

  setTimeout(async () => {
    await browser.close();
  }, 2000);
})();

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      html,
      body {
        margin: 0;
      }
    </style>
  </head>
  <body>
    <script src="https://unpkg.com/p5@0.7.2/lib/p5.min.js"></script>
    <script src="https://unpkg.com/p5@0.7.2/lib/addons/p5.dom.min.js"></script>
    <script>
      let isButtonRight = false;
      let make = null;
      let root = null;
      let makeSize = null;

      function setup() {
        root = createDiv();
        createCanvas(600, 400)
          .parent(root)
          .id('js-canvas');
        background(0);

        makeSize = createVector(40, 40);
        createmake();

        document.getElementById('js-canvas').oncontextmenu = e =>
          e.preventDefault();
        document.getElementById('js-make').oncontextmenu = e =>
          e.preventDefault();
      }

      function draw() {
        if (mouseIsPressed) {
          // 鼠標按下畫
          if (mouseIsPressed && mouseButton === LEFT) {
            // stroke(random(255), random(255), random(255));
            stroke('red');
            strokeWeight(4);
            line(
              isButtonRight ? mouseX : pmouseX,
              isButtonRight ? mouseY : pmouseY,
              mouseX,
              mouseY,
            );
            isButtonRight = false;
          } else if (mouseButton === RIGHT) {
            isButtonRight = true;

            //  if(keyCode === 18){// 按下 alt 相加
            //   makeSize.add(0.5, 0.5);
            // }else if(keyCode === 17){  // 按下 ctrl 相減
            //   makeSize.sub(0.5, 0.5);
            // }
            make.size(makeSize.x, makeSize.y);
            make.position(mouseX, mouseY).show();

            fill(0);
            noStroke();
            ellipseMode(CENTER);
            ellipse(mouseX, mouseY, makeSize.x);
          }
        }

        if (keyIsPressed) {
          // 按下空格鍵清空畫布
          if (keyCode == 32) background(0);
        }
      }

      function mouseReleased() {
        if (mouseButton === RIGHT) {
          make.hide();
          makeSize = createVector(40, 40);
        }
      }

      // make在右鍵被呼起時才顯示， 右鍵被擡起則隱藏
      function createmake() {
        make = createDiv()
          .parent(root)
          .id('js-make')
          .size(makeSize.x, makeSize.y)
          .style('background-color', '#fff')
          .style('border-radius', '50%')
          .style('transform', 'translate(-40%, -40%)')
          .hide();
      }
    </script>
  </body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。