[英]JavaScript stroke fill on click
我试图让画布上的图像有一个低不透明度的框,以显示它已被选中。 所以我需要一个 onclick 功能,但我不知道该怎么做。 有什么建议吗? 如果有人能指出我如何使盒子也脉动的正确方向,我也会很感激。
var image1 = new Kinetic.Image({
image: imageObj,
x: xposition,
y: yposition,
width: width,
height: height,
stroke: 'blue',
srokeFill: 'red',
strokeWidth: 5,
draggable: true,
dragBoundFunc: function (pos) {
if (pos.x < this.minX)
this.minX = pos.x;
return {
x: pos.x,
y: this.getAbsolutePosition().y
}
}
});
layer.on('mouseover', function (evt) {
var shape = evt.target;
document.body.style.cursor = 'pointer';
shape.strokeEnabled(true);
layer.draw();
});
layer.on('mouseout', function (evt) {
var shape = evt.target;
document.body.style.cursor = 'default';
shape.strokeEnabled(false);
layer.draw();
});
在画布上制作可点击区域时,您需要这样做。
- Create a redraw function.
- Find the mouse point inside of canvas.
- Do collision detection on the mouse point and region.
更新:添加了多个可点击区域。
// x1, y1, x2, y2, clicked var boxes = [{ x1: 10, y1: 10, x2: 110, y2: 110, clicked: false }, { x1: 120, y1: 10, x2: 220, y2: 110, clicked: false }]; function go() { var can = document.getElementById('can'); var ctx = can.getContext('2d'); var w = can.width; var h = can.height; makeNoise(ctx); var imageData = ctx.getImageData(0, 0, w, h); var mx = 0; var my = 0; $('#can').mousemove(function(event) { var offset = $(this).offset(); mx = event.pageX - offset.left; my = event.pageY - offset.top; redraw(); }); $('#can').click(function(event) { var offset = $(this).offset(); mx = event.pageX - offset.left; my = event.pageY - offset.top; for (var i = 0, len = boxes.length; i < len; i++) { var b = boxes[i]; if (hit(b.x1, b.y1, b.x2, b.y2)) { b.clicked = !b.clicked; } } redraw(); }); function redraw() { // Draw the original image ctx.putImageData(imageData, 0, 0); // Draw the clickable region for (var i = 0, len = boxes.length; i < len; i++) { drawBox(boxes[i]); } // Draw the mouse. Probably only needed when testing // mouse location. drawMouse(); } redraw(); // Collision dection of a square against mouse point. // square points x1,y1 must be less than x2,y2 function hit(x1, y1, x2, y2) { if (mx < x1 || my < y1 || mx > x2 || my > y2) return false; return true; } function drawMouse() { ctx.moveTo(mx, my); ctx.fillStyle = "yellow"; ctx.beginPath(); ctx.arc(mx, my, 5, 0, Math.PI * 360); ctx.fill(); } function drawBox(b) { if (b.clicked) { // Mouse clicked. ctx.fillStyle = "rgba(255,0,255,.5)" } else if (hit(b.x1, b.y1, b.x2, b.y2)) { // Mouse Over ctx.fillStyle = "rgba(255,255,255,.5)" } else { // Mouse Out ctx.fillStyle = "red"; } ctx.fillRect(b.x1, b.y1, b.x2 - b.x1, b.y2 - b.y1); } } // Fill a canvas context with noise. function makeNoise(ctx) { var can = ctx.canvas; var imageData = ctx.getImageData(0, 0, can.width, can.height); var d = imageData.data; for (var i = 0, len = d.length; i < len; i += 4) { d[i] = d[i + 1] = d[i + 2] = (Math.random() * 8) << 4; d[i + 3] = 255; } ctx.putImageData(imageData, 0, 0); } go();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <canvas id="can" width="400" height="300"></canvas>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.