javascript - 手动 slider 不应在透明区域可见

Question

我遇到了一些对你们中的一些人来说绝对是挑战的事情。至少它适合我，我希望有人可以帮助我。

我使用的是 2 张图像，它们彼此重叠。然后有一个分隔图像，您可以使用光标控制它从左向右滑动，反之亦然。

<div class="green_block"></div>
<div class="triforce">
  <div class="divider"></div>
</div>

一切正常，但我希望分隔线在接触顶部图像的透明区域时不可见。

JSFiddle

在 fiddle 的情况下，蓝色条必须显示在 Triforce 的顶部，而不是它的透明部分。这可能吗？

Answer 1

可以使用 Canvas 元素。使用 canvas 的 getImageData 方法获取图像的像素数据并检查 rgb 值。要使用 getImageData，由于跨域问题，您需要将脚本文件和图像放在同一域中。在这种情况下，分隔线在 #00ff00 上不可见。

Sample

HTML:

<canvas id="canvas"></canvas>

Javascript:

$(document).ready(function(){
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var image=document.createElement("img");
    image.onload=function(){
        canvas.width = image.width;
        canvas.height = image.height;
        ctx.fillStyle="#00ff00";
        ctx.fillRect(0,0,canvas.width,canvas.width);
        ctx.drawImage(image,0,0);
        init();
    }

    image.src="Triforce.png";

    function init(){
        var imageData = ctx.getImageData(0, 0, image.width, image.height);
        var data = imageData.data;
        canvas.addEventListener('mousemove', function(evt) {
            var mousePos = getMousePos(canvas, evt);
            var x = mousePos.x;
            var y = mousePos.y;

            ctx.clearRect(0,0,canvas.width,canvas.height);

            ctx.fillStyle="#00ff00";
            ctx.fillRect(0,0,canvas.width,canvas.width);

            ctx.drawImage(image,0,0);

            ctx.fillRect(x, 0, canvas.width,canvas.height);

            ctx.fillStyle="#0000ff";
            for(var i=x;i<x+10;i++){
                for(var j=0;j<image.height;j++){
                    var red = data[((image.width * j) + i) * 4];
                    var green = data[((image.width * j) + i) * 4 + 1];
                    var blue = data[((image.width * j) + i) * 4 + 2];
                    var alpha = data[((image.width * j) + i) * 4 + 3];
                    if(!(red==0 && green==255 && blue==0)){
                        ctx.fillRect(i,j,1,1);
                    }
                }
            }
        }, false);
    }

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