当您单击画布内的矩形时，将全屏显示其中的所有形状 [英] When you click on the rectangle inside the canvas, becomes full screen of all the shapes inside it

问题描述

我绘制画布，并在其中绘制一些形状和文本栏，我想当我单击第二个形状时，小矩形使画布在屏幕上充满了移动的胶带和小矩形，并按了全屏返回之前，再次返回

I draw canvas and I draw inside it some shape and text bar , I would like when I click on the second shape the small rectangle that the canvas becomes full of the screen with the moving tape and the small rectangle and when I press it again it when it full screen returns as before

var pointX, pointY , w , h ;

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
c.width = 1000;
c.height = 650;
ctx.clearRect(0, 0, ctx.canvas.width,ctx.canvas.height);

function drawShape1(){
  ctx.beginPath();
    ctx.strokeStyle='red';
    ctx.strokeRect(10,0,720,576);
    ctx.closePath();
    ctx.beginPath();
    ctx.fillStyle='grey';
    ctx.fillRect(10,525,720,50);
    ctx.closePath();
}

function drawShape2(){
     pointX = 690;
     pointY = 550;
     w = 30;
    h = 20;
    ctx.beginPath();
    ctx.strokeStyle='red';
    ctx.strokeRect(pointX,pointY,w,h);
    ctx.closePath();
}
    

    var start = 10;
 
function frame(){
 requestAnimationFrame(frame)
 ctx.clearRect(0,0,c.width,c.height)
 drawShape1() 
 start += 2;
 ctx.font = "30px Arial";
    ctx.fillStyle = "red";
     ctx.textAlign = "left";
    ctx.fillText("Hello World",start, 560); 
  drawShape2() 
  }

frame()

      
              <canvas id="myCanvas" width="1050" height="1050"  class="col-12 col-s-12" >
                </canvas>

推荐答案

要在画布上单击某个形状时做某事，您需要

In order to do something when you click inside a shape on canvas you need

1. 绘制需要单击的景观


2. 在单击画布时检测鼠标的位置


3. 如果鼠标位于形状内，则可以执行任何操作，在这种情况下，请打开画布

var pointX = 690,
     pointY = 550,
     w = 30,
     h = 20;

var mouse = {};

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
c.width = 1000;
c.height = 650;
ctx.clearRect(0, 0, ctx.canvas.width,ctx.canvas.height);

function drawShape1(){
  ctx.beginPath();
    //ctx.strokeStyle='red';
    ctx.strokeRect(10,0,720,576);
    ctx.closePath();
    ctx.beginPath();
    ctx.fillStyle='grey';
    ctx.fillRect(10,525,720,50);
    ctx.closePath();
}

function drawShape2(){
    ctx.beginPath();
    ctx.rect(pointX,pointY,w,h);
    //ctx.closePath();
}


    var start = 10;

function frame(){
 requestAnimationFrame(frame)
 ctx.clearRect(0,0,c.width,c.height);
 ctx.strokeStyle='red';
 drawShape1() 
 start += 2;
 ctx.font = "30px Arial";
 ctx.fillStyle = "red";
 ctx.textAlign = "left";
 ctx.fillText("Hello World",start, 560); 

 drawShape2();
 ctx.stroke(); 
  }

frame();

let i = 0;
c.addEventListener("click",(evt)=>{
  mouse = oMousePos(c, evt);
  //draw the second shape but do not stroke it
  drawShape2();
  // if the point is inside the shape 2 open the canvas in full screen
  if (ctx.isPointInPath(mouse.x, mouse.y)){
    openFullscreen(c);
  }
});

// a function to open in full screen
function openFullscreen(elem) {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { /* Firefox */
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
    elem.msRequestFullscreen();
  }
}

// a function to detect the mouse position
function oMousePos(canvas, evt) {
  var ClientRect = canvas.getBoundingClientRect();
    return { //objeto
    x: Math.round(evt.clientX - ClientRect.left),
    y: Math.round(evt.clientY - ClientRect.top)
}
}

canvas{border:1px solid;}

<canvas id="myCanvas" class="col-12 col-s-12" >I prefer to declare the width and the height of the canvas in JS</canvas>

要退出全屏模式，用户可以单击esc按钮。如果要通过再次单击较小的形状来执行此操作，则会更加复杂，因为画布已缩放，并且您需要知道比例才能进行鼠标检测。或者，您可以让用户单击画布内的任何位置以退出全屏显示。

To get out of the full screen mode the user can click the esc button. If you want to do it by clicking again the small shape this is more complicated because the canvas is scaled and you would need to know the scale in order to be able to do the mouse detection. Alternatively you may let the user to click anywhere inside the canvas to get out of the full screen.

这是关闭全屏显示模式的功能。

This is a function to close the full screen mode.

function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) { /* Firefox */
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE/Edge */
    document.msExitFullscreen();
  }
}

这篇关于当您单击画布内的矩形时，将全屏显示其中的所有形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！