html5鼠标事件监听,canvas图形监听鼠标事件

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

let cs = new CanvasMaker.Canvas('container');

let ctx = cs.context;

class Path {

constructor(options) {

this.path = options.path || [];

this.color = options.color || new CanvasMaker.Color(1, 1, 1);

this.hoverColor = options.hoverColor || new CanvasMaker.Color(1, 1, 0);

}

}

let selectFlag = false;

let selectIndex = undefined; // 选中图形下标

let startPos = {

x: 0,

y: 0

}; // mousedown起始位置

// 随机几何图形

let storage = [];

for (let i = 0; i < 5; i++) {

let color = new CanvasMaker.Color(Math.random(), Math.random(), Math.random());

let r = (color.r * 255 + 20) / 255;

let g = (color.g * 255 + 20) / 255;

let b = (color.b * 255 + 20) / 255;

if (r > 1) r = 1;

if (g > 1) g = 1;

if (b > 1) b = 1;

let hoverColor = new CanvasMaker.Color(r, g, b);

let path = new Path({

path: randomPoints(),

color: color,

hoverColor: hoverColor

});

storage.push(path);

}

// 绘制图形

for (let i = 0; i < storage.length; i++) {

ctx.beginPath();

storage[i].path.forEach(function(item, index) {

if (index == 0) {

ctx.moveTo(item.x, item.y);

} else {

ctx.lineTo(item.x, item.y);

}

});

ctx.closePath();

ctx.fillStyle = storage[i].color.getHexString();

ctx.fill();

}

// 随机几何图形的点集

function randomPoints() {

let points = [];

// 随机中心点

let center = {

x: CanvasMaker.Math.randFloat(100, cs.width - 100),

y: CanvasMaker.Math.randFloat(100, cs.height - 100),

};

const len = CanvasMaker.Math.randInt(3, 5);

// 根据长度生成距离中心点最大长度内的随机点

for (let i = 0; i < len; i++) {

points.push({

x: center.x + 500 * Math.random(),

y: center.y + 500 * Math.random()

})

}

return points;

}

function onMouseMove(e) {

cs.clear();

const x = e.clientX - cs.canvas.getBoundingClientRect().left;

const y = e.clientY - cs.canvas.getBoundingClientRect().top;

let hoverGeo = undefined;

for (let i = 0; i < storage.length; i++) {

ctx.beginPath();

storage[i].path.forEach(function(item, index) {

if (selectFlag && selectIndex == i) {

item.x += (x - startPos.x);

item.y += (y - startPos.y);

}

if (index == 0) {

ctx.moveTo(item.x, item.y);

} else {

ctx.lineTo(item.x, item.y);

}

});

if (ctx.isPointInPath(x, y)) hoverGeo = storage[i];

ctx.closePath();

ctx.fillStyle = storage[i].color.getHexString();

ctx.fill();

}

// 高亮

if (hoverGeo) {

ctx.beginPath();

hoverGeo.path.forEach(function(item, index) {

if (index == 0) {

ctx.moveTo(item.x, item.y);

} else {

ctx.lineTo(item.x, item.y);

}

});

ctx.closePath();

ctx.fillStyle = hoverGeo.hoverColor.getHexString();

ctx.fill();

}

startPos = {

x: x,

y: y

};

}

function onMouseDown(e) {

const x = e.clientX - cs.canvas.getBoundingClientRect().left;

const y = e.clientY - cs.canvas.getBoundingClientRect().top;

startPos = {

x: x,

y: y

}

let tempIndex = undefined; // 选中的最上面的一层

for (let i = 0; i < storage.length; i++) {

ctx.beginPath();

storage[i].path.forEach(function(item, index) {

if (index == 0) {

ctx.moveTo(item.x, item.y);

} else {

ctx.lineTo(item.x, item.y);

}

});

ctx.closePath();

if (ctx.isPointInPath(x, y)) {

tempIndex = i;

}

}

if (tempIndex == undefined) {

// 未选中

selectFlag = undefined;

} else {

selectFlag = true;

// 置为顶层

let temp = storage[tempIndex];

storage.splice(tempIndex, 1);

storage.push(temp);

selectIndex = storage.length - 1;

}

}

function onMouseUp(e) {

selectFlag = false;

}

cs.bindEvent('mousemove', onMouseMove);

cs.bindEvent('mousedown', onMouseDown);

cs.bindEvent('mouseup', onMouseUp);