向动态画布添加链接

Question

我有一个画布脚本，带有动态的数据。我想添加一个链接来分享facebook的网站：

https://gyazo.com/c1fd1fe956fddba27b48907dc0e9de0a

这些图标是我没有通过画布生成的图像的一部分，现在，如果我听一次共和弦的点击，它将无法工作，因为它也会查找第一个画布部分的点击.我怎样才能让这些图标成为可点击图像的一部分.

制作菜单的部分：

ig.module("game.entities.gameover").requires("impact.entity", "game.entities.button-gameover").defines(function() {
var b = new ig.Timer;
EntityGameover = ig.Entity.extend({
    size: {
        x: 302,
        y: 355
    },
    type: ig.Entity.TYPE.B,
    animSheet: new ig.AnimationSheet("media/graphics/game/gameover.png", 301, 352),
    zIndex: 900,
    globalAlpha: 0.1,
    closeDialogue: !0,

    init: function(c, d, g) {
        this.parent(c, d, g);
        this.addAnim("idle", 1, [0]);
        this.currentAnim = this.anims.idle;
        this.tween({
            pos: {
                x: 89,
                y: 120
            }
        }, 0.5, {
            easing: ig.Tween.Easing.Back.EaseInOut
        }).start();
        this.storage = new ig.Storage;
        this.storage.initUnset("highscore-CTF", 0);
        this.storage.initUnset("highscore-CTF2", 0);
        this.storage.initUnset("highscore-CTF3", 0);
        ig.global.score > this.storage.get("highscore-CTF") ? (this.storage.set("highscore-CTF3", this.storage.get("highscore-CTF2")), this.storage.set("highscore-CTF2", this.storage.get("highscore-CTF")), this.storage.set("highscore-CTF", ig.global.score), this.storage.initUnset("highscore-CTF2", 0), this.storage.initUnset("highscore-CTF3", 0)) : ig.global.score > this.storage.get("highscore-CTF2") ?
            (this.storage.set("highscore-CTF3", this.storage.get("highscore-CTF2")), this.storage.set("highscore-CTF2", ig.global.score), this.storage.initUnset("highscore-CTF2", 0), this.storage.initUnset("highscore-CTF3", 0)) : ig.global.score > this.storage.get("highscore-CTF3") && this.storage.set("highscore-CTF3", ig.global.score);
        this.storage.initUnset("total-CTF", 0);
        this.storage.set("total-CTF", this.storage.get("total-CTF") + ig.global.score);
        ig.game.spawnEntity(EntityButtonGameover, 23, 700, {
            buttonID: 1
        });
        ig.game.spawnEntity(EntityButtonGameover,
            220, 700, {
                buttonID: 2
            });
        ig.game.spawnEntity(EntityButtonGameover, 390, 700, {
            buttonID: 3
        });
        b.set(0.3)
    },
    update: function() {
        this.parent()
    },
    draw: function() {
        this.ctx = ig.system.context;
        this.closeDialogue ? (this.ctx.save(), this.ctx.fillStyle = "#000000", this.ctx.globalAlpha = this.globalAlpha, this.ctx.fillRect(0, 0, 480, 640), this.ctx.restore(), this.globalAlpha = 0.7 <= this.globalAlpha ? 0.7 : this.globalAlpha + 0.01) : this.closeDialogue || (this.ctx.save(), this.ctx.fillStyle = "#000000", this.ctx.globalAlpha = this.globalAlpha, this.ctx.fillRect(0,
            0, 480, 640), this.ctx.restore(), this.globalAlpha = 0.1 >= this.globalAlpha ? 0 : this.globalAlpha - 0.05);
        this.parent();
        this.ctx.font = "30px happy-hell";
        this.ctx.fillStyle = "#5b2a0b";
        this.ctx.textAlign = "center";
        this.ctx.fillText(_STRINGS.UI.Best, this.pos.x + 70, this.pos.y + 180);
        this.ctx.fillText(_STRINGS.UI.Score, this.pos.x + 70, this.pos.y + 260);




        //share
        this.ctx.font = "30px happy-hell";
        this.ctx.fillStyle = "#ffffff";
        this.ctx.textAlign = "left";
        this.ctx.fillText(this.storage.getInt("highscore-CTF"), this.pos.x + 140, this.pos.y + 180);
        this.ctx.fillText(ig.global.score, this.pos.x + 140, this.pos.y + 260)
    },
    closeDialogueFunc: function() {
        this.closeDialogue && (this.tween({
            pos: {
                x: 89,
                y: -600
            }
        }, 0.5, {
            easing: ig.Tween.Easing.Back.EaseInOut
        }).start(), this.closeDialogue = !1)
    }
})

})；

Answer 1

我已经成功地点击了画布中的某个元素。

我试图用评论来解释它的作用。我已经做了3个限制，如下图所示。

​

我只比较x值，如果它在这些极限之间。它可能更复杂，因此getCursorPosition()方法返回带有x和y组件的对象，以防万一需要进行更多的比较。

jserodio/asa10/

​

    var canvas;
    var ctx;

    // first get your canvas
    canvas = document.getElementById('canvas');
    canvas.width = 253;
    canvas.heigth = 68;

    // assign the context
    ctx = canvas.getContext("2d");

    // asign click event to the canvas
    addEventListener("click", listener, false);

    function listener(e) {
      // if you have 3 buttons
      var position = getCursorPosition(e);

      var limit1 = canvas.width / 3;
      //console.log("limit1: " + limit1);
      var limit2 = canvas.width * 2 / 3;
      //console.log("limit2: " + limit2);
      var limit3 = canvas.width;
      //console.log("limit3: " + limit3);

      if (position.x < limit1) {
        console.log("go to facebook");
        //window.open("http://www.facebook.com");
      } else if (position.x < limit2) {
        console.log("go to twitter");
        //window.open("http://www.twitter.com");
      } else if (position.x < limit3) {
        console.log("go to whatsapp");
        //window.open("http://www.whatsapp.com");
      }

      //console.log("\nx" + position.x);
      //console.log("y" + position.y);
    }

    function getCursorPosition(event) {
      var rect = canvas.getBoundingClientRect();
      var x = event.clientX - rect.left;
      var y = event.clientY - rect.top;
      var data = {
        x: x,
        y: y
      };
      return data;
    }

    // load image from data url
    var imageObj = new Image();
    imageObj.onload = function() {
      ctx.drawImage(this, 0, 0);
    };

    imageObj.src = 'https://justpaste.it/files/justpaste/d307/a11791570/file1.png';

<canvas id='canvas' width="253" height="68">

</canvas>

​

奖金！

这里有一个我用这个做的演示。演示(吃水/跳棋)。

如果愿意，可以检查这里的整个代码。

Answer 2

向画布图形添加菜单的一种简单、通用的方法是简单地覆盖一个绝对定位的DOM结构。您的浏览器已经有了所有的事件处理内置，没有必要重新发明车轮。

​

var canvas = document.getElementById('canvas'),
  ctx = canvas.getContext('2d');

ctx.fillStyle = 'rgb(0, 155, 255)';
ctx.fillRect(0, 0, canvas.width, canvas.height)

#container {
  position: relative;
  display: inline-block;
}
#menu {
  position: absolute;
  text-align: center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
#menu a {
  padding: 15px;
  font-size: 50px;
  line-height: 100px;
  color: black;
  text-shadow: 2px 2px 5px white;
}
#menu a:hover {
  color: white;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />

<div id='container'>
  <canvas id='canvas' width='400' height='100'></canvas>
  <div id='menu'>
    <a href='http://facebook.com'><i class='fa fa-facebook-official'></i></a>
    <a href='http://twitter.com'><i class='fa fa-twitter'></i></a>
    <a href='http://whatsapp.com'><i class='fa fa-whatsapp'></i></a>
  </div>
</div>

​

您的浏览器能够非常快速地呈现这样的覆盖菜单。您应该使用CSS样式您的叠加菜单链接或按钮。

Answer 3

在这种情况下，您有几个操作。

选项1:您需要记住三个按钮的“边界区域”。每当画布收到一个“点击”，得到点击位置(如何获得鼠标单击画布元素的坐标？)。一旦你得到点击位置。检测所述单击是否发生在按钮的边界区域内。如果是这样的话，就使用window.open去那里。

选项2:类似于选项1，但是没有记住一个“边界区域”，而是创建一个单独的隐藏画布，其大小与背景相同('#000000')，按钮具有独特的颜色(例如，红色表示Facebook，绿色表示Twitter，蓝色表示Hangout?)然后，类似于选项1，获取相对于画布的单击位置。然后在隐藏画布层的上下文中使用ctx.getImageData(sx, sy, sw, sh)。如果你得到的值是红色，那么用户点击Facebook，如果绿色，Twitter，如果蓝色，Hangout。