如何使它在PNG上悬停透明不算盘旋? [英] How to make it so that Hovering Over Transparency in a PNG doesn't count as hovering?
问题描述
当我将鼠标悬停在PNG的透明部分上时,它仍然像我在实际图像上悬停一样。有没有办法可以防止这种情况发生?所以当我将鼠标悬停在图像的可见部分而不是透明部分时,它只会采取行动?我试图突出显示透明度,但我不能'
可以通过将png转换为canvas元素来完成
这可以通过将png加载到HTML-5 canvas元素中,然后查询画布中被点击的像素的alpha值来实现。
工作演示: http://jsfiddle.net/x9ScK/3/
HTML如下...
<! - 创建一个画布元素来容纳PNG图像 - >
< canvas id =canvas1width =500height =500>< / canvas>
Javascript like this ...
//用jQuery选择canvas元素,并设置
//为整个画布单击处理程序
$('#canvas1')。on('click ',函数(e){
//用于查找单击像素位置的实用函数
函数findPos(obj){
var curleft = 0,curtop = 0;
如果(obj.offsetParent){
做{
curleft + = obj.offsetLeft;
curtop + = obj.offsetTop;
},而(OBJ = obj.offsetParent);
return {x:curleft,y:curtop};
}
return undefined;
}
//获得点击像素的位置
var pos = findPos(this);
var x = e.pageX - pos.x;
var y = e.pageY - pos.y;
//获取单击$ b上的canvas元素的引用$ b var canvas = this.getContext('2d');
//返回[RED,GREEN,BLUE,ALPHA]数组作为点击像素的0-255
var pixel = canvas.getImageData(x,y,1,1).data;
//如果alpha不是0,我们点击一个不透明的像素
//可以很容易地调整以检测点击像素的其他特征
if(pixel [3]!= 0){
//点击图片时做点什么...
alert(点击骰子!);
}
});
//获取对画布DOM元素的引用
var canvas = $('#canvas1')[0];
//获得对canvas上下文的引用
var context = canvas.getContext('2d');
//创建一个空的图像
var img = new Image();
//加载后...
img.onload = function(){
//将图像绘制到画布上
context.drawImage(img,0,0);
}
//设置图片来源(可以是任何网址 - 我使用数据URI来保持演示不变)
img.src =data:image / png; base64,iVBORw0KGgoAAAANS ...更多图片数据... TkSuQmCC; //带透明度的PNG
When I hover over the transparent part of a PNG, it still acts as though I'm hovering over the actual image. Is there a way that I can prevent that from happening? So that it only takes action when I hover over the visible part of the image, and not the transparent part?
I tried to crop out the transparency, but I couldn't find a way how.
Can be done by converting png to canvas element
This works by loading a png into an HTML-5 canvas element, and then querying the canvas for the alpha value of the clicked pixel.
Working demo: http://jsfiddle.net/x9ScK/3/
HTML as follows...
<!-- create a canvas element to hold the PNG image -->
<canvas id="canvas1" width="500" height="500"></canvas>
Javascript like this...
// select the canvas element with jQuery, and set up
// a click handler for the whole canvas
$('#canvas1').on('click', function(e) {
// utility function for finding the position of the clicked pixel
function findPos(obj) {
var curleft = 0, curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return { x: curleft, y: curtop };
}
return undefined;
}
// get the position of clicked pixel
var pos = findPos(this);
var x = e.pageX - pos.x;
var y = e.pageY - pos.y;
// get reference to canvas element clicked on
var canvas = this.getContext('2d');
// return array of [RED,GREEN,BLUE,ALPHA] as 0-255 of clicked pixel
var pixel = canvas.getImageData(x, y, 1, 1).data;
// if the alpha is not 0, we clicked a non-transparent pixel
// could be easily adjusted to detect other features of the clicked pixel
if(pixel[3] != 0){
// do something when clicking on image...
alert("Clicked the dice!");
}
});
// get reference to canvas DOM element
var canvas = $('#canvas1')[0];
// get reference to canvas context
var context = canvas.getContext('2d');
// create an empty image
var img = new Image();
// after loading...
img.onload = function() {
// draw the image onto the canvas
context.drawImage(img, 0, 0);
}
// set the image source (can be any url - I used data URI to keep demo self contained)
img.src = "data:image/png;base64,iVBORw0KGgoAAAANS ... more image data ...TkSuQmCC"; // PNG with transparency
这篇关于如何使它在PNG上悬停透明不算盘旋?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!