Question

我已经遇到了一些最挑剔的事情。至少这对我而言，我希望有人可以帮助我。

我正在使用2张彼此叠加的图像。然后是一个分割器图像，您可以用光标控制它从左到右滑动它，反之亦然。

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

这一切都有效，但我希望分割器在触摸顶部图像的透明区域时不可见。

JSFiddle

在小提琴的情况下，蓝色条必须显示在Triforce的顶部，但不能显示在它的透明部分上。这甚至可能吗？

Answer 1

可以使用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
        };
    }
});

Answer 2

我会使用与图像完全相反的第二张图像（透明部分=＆gt;蓝色/彩色=＆gt;透明）。

我会在顶部图像同时移动两个div。绿色的一个和第二个将被分隔符（溢出隐藏）（分隔符应该是透明的）。

一个（溢出隐藏）必须执行一个动画，分隔符正在移动，所以它看起来像你的图像的确切对手

  <div class="green_block"></div>
   <div class="triforce">
    <div class="divider">
      <div class="antagonist-div">
      <!-- this one should move inside the divider while he is moving --> 
      </div>
    </div>
   </div>
  </div>

Answer 3

我找到了适合我的解决方案。我创建了另一个图像，我将网站的背景作为透明部分。我把它放在其他的顶部，让分隔物在它后面滑动。

原油解决方案，不值得推荐，但在这种情况下就足够了。感谢所有的帮助。我从中学到了很多东西。

在透明区域上不应显示手动滑块

3 个答案: