当圆形对象与画布内的按钮接触时,是否可以触发按钮?

时间:2019-08-01 08:30:12

标签: javascript html button canvas html5-canvas

当圆形对象接触画布中的按钮时,是否有可能触发按钮?

我在画布中有两个按钮和圆形形状-单击按钮时会触发按钮事件。我想知道是否有一种方法可以在按钮事件与画布上的圆形接触时触发它。

在下面的示例中,当黄色圆圈与左按钮接触时,我将尝试触发按钮。

import tkinter as tk

def test():
    ven=tk.Tk()
    v1=tk.StringVar()
    v1.set('TEST')
    print(v1.get())
    tk.Label(ven, textvariable=v1).pack()
    ven.mainloop()

win=tk.Tk()
tk.Button(text='BOTON',command=test).pack()
win.mainloop()
var canvas = document.getElementById("circle");
var ctx = canvas.getContext("2d");
var model = {
  circle1: { x: 300, y: 200, color: "pink"},
  circle2: { x: 200, y: 200, color: "yellow" }
 
};

var radius = 50;

function view(ctx, model) {
  function circle(c) {

    //circle1 , circle2
    ctx.beginPath();
    ctx.arc(c.x, c.y, radius, 0, 2 * Math.PI, true);
    ctx.fillStyle = c.color;
    ctx.fill();
    ctx.stroke();

  }
  // clear canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  circle(model.circle1);
  circle(model.circle2);

}


function redraw() {
  view(ctx, model);
}

redraw();

function getCircleForPosition(x, y) {
  function intersect(a, b) {
    var d2 = Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2);
    r2 = Math.pow(radius, 2);
    return d2 < r2;
  }

  return [model.circle1, model.circle2].find(circle => intersect(circle, {
    x,
    y
  }));
}


canvas.addEventListener('mousedown', function(e) {
  model.dragging = getCircleForPosition(e.pageX, e.pageY);
}, 0);
canvas.addEventListener('mouseup', function() {
  model.dragging = undefined;
}, 0);
canvas.addEventListener('mousemove', function(e) {
  if (model.dragging) {
    model.dragging.x = e.pageX;
    model.dragging.y = e.pageY;
    redraw();
  }
}, 0);

0 个答案:

没有答案