个人中心
gpt4 book ai didi

javascript - HTML Canvas 和 Javascript - 悬停和单击事件

转载 作者：太空宇宙 更新时间：2023-11-04 15:44:28 25 4
gpt4 key购买 nike

下面是一个脚本，它定义了两个函数，分别绘制 4 个矩形按钮和 1 个圆形按钮。我正在尝试在按钮中实现特定的悬停和单击功能(如脚本警报中所述)，但我对如何执行此操作有点茫然。我尝试在每次单击时调用 makeInteractiveButton() 函数，但这导致了很多奇怪的重叠和滞后。我希望脚本执行以下操作:

如果圆形按钮悬停，我希望它的 fillColour 发生变化，如果单击它，我希望它再次更改为代码中描述的颜色(#FFC77E 表示悬停，#FFDDB0 表示单击)。这应该仅在悬停或点击期间发生。

HTML:

<html lang="en">
<body>
    <canvas id="game" width = "750" height = "500"></canvas>
    <script type='text/javascript' src='stack.js'></script>
</body>
</html>

JavaScript:

var c=document.getElementById('game'),
    canvasX=c.offsetLeft,
    canvasY=c.offsetTop,
    ctx=c.getContext('2d')
    elements = [];

c.style.background = 'grey';

function makeInteractiveButton(x, strokeColor, fillColor) {
    ctx.strokeStyle=strokeColor;
    ctx.fillStyle=fillColor;
    ctx.beginPath();
    ctx.lineWidth=6;
    ctx.arc(x, 475, 20, 0, 2*Math.PI);
    ctx.closePath();
    ctx.stroke();
    ctx.fill();
    elements.push({
        arcX: x,
        arcY: 475,
        arcRadius: 20
    });
}

b1 = makeInteractiveButton(235, '#FFFCF8', '#FFB85D');

c.addEventListener('mousemove', function(event) {
    x=event.pageX-canvasX; // cursor location
    y=event.pageY-canvasY;

    elements.forEach(function(element) {
        if (x > element.left && x < element.left + element.width && 
            y > element.top && y < element.top + element.height) { // if cursor in rect
          alert('Rectangle should undergo 5 degree rotation and 105% scale');
        }
        else if (Math.pow(x-element.arcX, 2) + Math.pow(y-element.arcY, 2) < 
                 Math.pow(element.arcRadius, 2)) { // if cursor in circle
            alert('Set b1 fillColour to #FFC77E.');
        }
    });
}, false);

c.addEventListener('click', function(event) {
    x=event.pageX-canvasX; // cursor location
    y=event.pageY-canvasY;

    elements.forEach(function(element) {
        if (x > element.left && x < element.left + element.width && 
            y > element.top && y < element.top + element.height) { // if rect clicked
            alert('Move all cards to centre simultaneously.');
        }
        else if (Math.pow(x-element.arcX, 2) + Math.pow(y-element.arcY, 2) < 
                 Math.pow(element.arcRadius, 2)) { // if circle clicked
            alert('Set b1 fillColour to #FFDDB0.');
        }
    });
}, false);

最佳答案

example canvas hitting test

一种方法是保留所有元素数据并编写一个 hitTest(x,y) 函数，但是当您有很多复杂的形状时，最好使用辅助 Canvas 来渲染元素及其 ID，而不是其中的颜色和第二个 Canvas 中 x,y 的颜色是命中元素的 ID，我应该提到第二个 Canvas 不可见，它只是一个用于获取命中元素的凝胶器。

Github 示例:

https://siamandmaroufi.github.io/CanvasElement/

矩形的 hitTest 的简单实现:

    var Rectangle = function(id,x,y,width,height,color){
      this.id = id;
      this.x=x;
      this.y=y;
      this.width = width;
      this.height = height;
      this.color = color  || '#7cf';
      this.selected = false;
    }

    Rectangle.prototype.draw = function(ctx){
     ctx.fillStyle = this.color;
     ctx.fillRect(this.x,this.y,this.width,this.height);
     if(this.selected){
       ctx.strokeStyle='red';
       ctx.setLineDash([5,5]);
       ctx.lineWidth = 5;
       ctx.strokeRect(this.x,this.y,this.width,this.height);
     }
    }

    Rectangle.prototype.hitTest=function(x,y){
     return (x >= this.x) && (x <= (this.width+this.x)) &&
            (y >= this.y) && (y <= (this.height+this.y));
    }

    var Paint  = function(el) {
     this.element = el;
     this.shapes = [];
    }

    Paint.prototype.addShape = function(shape){
     this.shapes.push(shape);
    }

    Paint.prototype.render = function(){
     //clear the canvas
     this.element.width = this.element.width;
     var ctx = this.element.getContext('2d');
     for(var i=0;i<this.shapes.length;i++){
      this.shapes[i].draw(ctx);
     }
    }

    Paint.prototype.setSelected = function(shape){
      for(var i=0;i<this.shapes.length;i++){
        this.shapes[i].selected = this.shapes[i]==shape;
      }
      this.render();
    }

    Paint.prototype.select = function(x,y){
     for(var i=this.shapes.length-1;i>=0;i--){
      if(this.shapes[i].hitTest(x,y)){
       return this.shapes[i];
      }
     }
     return null;
    }

    var el = document.getElementById('panel');
    var paint = new Paint(el);
    var rectA = new Rectangle('A',10,10,150,90,'yellow');
    var rectB = new Rectangle('B',150,90,140,100,'green');
    var rectC = new Rectangle('C',70,85,200,70,'rgba(0,0,0,.5)');

    paint.addShape(rectA);
    paint.addShape(rectB);
    paint.addShape(rectC);

    paint.render();


    function panel_mouseUp(evt){
     var p = document.getElementById('panel'); 
     var x = evt.x - p.offsetLeft;
     var y = evt.y - p.offsetTop;
     var shape = paint.select(x,y);
     if(shape){ 
      alert(shape.id);
     }
     //console.log('selected shape :',shape);
    }

    function panel_mouseMove(evt){
      var p = document.getElementById('panel'); 
      var x = evt.x - p.offsetLeft;
      var y = evt.y - p.offsetTop;
      var shape = paint.select(x,y);

      paint.setSelected(shape);
    }


    el.addEventListener('mouseup',panel_mouseUp);
    el.addEventListener('mousemove',panel_mouseMove);
    body {background:#e6e6e6;}
    #panel {
     border:solid thin #ccc;
     background:#fff;
     margin:0 auto;
     display:block;
    }
    <canvas id="panel" width="400px" height="200px"  >
    </canvas>

只需单击或在形状上移动

关于javascript - HTML Canvas 和 Javascript - 悬停和单击事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43663279/

25 4 0
文章推荐： C++:将类作为参数传递给其他类的方法
文章推荐： javascript - 如何使用单个批处理文件或 javascript 导入或导出多个 mongo 集合
文章推荐： c++ - C++ 中的构造函数
文章推荐： javascript - 如何放大 iframe 中的文本？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com