抖音小游戏画图位置移动

news2024/11/24 5:07:38

文章目录

- - 画图
  - 移动图形位置

画图

const canvas = tt.createCanvas();
const context = canvas.getContext('2d');

context.width = 500;
context.height = 500;

let isPressing = false; // 是否按下
let startX = 0;
let startY = 0;

context.fillStyle = "#f00";
context.fillRect(0,0,100,100);

//点击鼠标事件
tt.onTouchStart((e)=>{
  // onTouchMove(e)
  console.log('onTouchStart:',e.touches[0].clientX)
  startX = e.touches[0].clientX
  startY = e.touches[0].clientY
  isPressing = true;
})
//鼠标移动
tt.onTouchMove((e)=>{
  console.log('onTouchMove:',e.touches[0].clientX)
  const touch = e.touches[0];
  const dx = touch.clientX - startX;
  const dy = touch.clientY -startY;
  // console.log('dx:',dx,'dy:',dy)
  // context.clearRect(startX,startY,100,100);
  context.fillStyle = '#f00';
  context.fillRect(dx,dy,100,100)
})

在这里插入图片描述

移动图形位置

const canvas = tt.createCanvas();
const context = canvas.getContext('2d');

context.width = 500;
context.height = 500;

let isPressing = false; // 是否按下
let startX = 0; //初始位置
let startY = 0; //初始位置

let moveStartX = 0; //移动后的位置
let moveStartY = 0; //移动后的位置

context.fillStyle = "#f00";
context.fillRect(0,0,100,100);

tt.onTouchStart((e)=>{
  // onTouchMove(e)
  console.log('onTouchStart:',e.touches[0].clientX)
  startX = e.touches[0].clientX
  startY = e.touches[0].clientY
  isPressing = true;
})
tt.onTouchMove((e)=>{
  console.log('onTouchMove:',e.touches[0].clientX)
  const touch = e.touches[0];
  const dx = touch.clientX -50; //无论如何要在中心点,根据图像大小来定义
  const dy = touch.clientY -50; //无论如何要在中心点,根据图像大小来定义
  // console.log('dx:',dx,'dy:',dy)
  // context.clearRect(startX,startY,100,100);
  context.clearRect(moveStartX,moveStartY,100,100)
  context.fillStyle = '#f00';
  context.fillRect(dx,dy,100,100)
  moveStartX = dx;
  moveStartY = dy;
})