创建一个左侧带有三角形指针的 div答案

【问题标题】：Create a div with a triangular pointer on the left创建一个左侧带有三角形指针的 div
【发布时间】：2013-07-17 07:19:26
【问题描述】：

我需要在 HTML 中创建一个非矩形 div。

问题是，它们都是透明的背景。此外，该 div 内的图像也是在一组图像之间旋转的幻灯片。

大图应该是旋转的。那部分很容易。最难的部分是那个指向杂项的三角形，对旋转的图片是透明的。而那个指针移动。在此示例中，这是对应于杂项的图像集。当用户点击食品包装时，指针必须移动指向食品包装

知道如何将图像切割成三角形并保持颜色对 img 透明，而其他部分对面板背景图像透明吗？

HTML：

<div ng-controller="rotatorController" id="parent">
    <div id="menu" ng-click="loadList($event)">
        <ul>
            <li>Packaging
                <ul>
                    <li>Food Packing</li>
                    <li>Non Food Packing</li>
                </ul>
            </li>
            <li>
                Promotional Item
                <ul>
                    <li>bla bla bla, you got the drift</li>
                </ul>
            </li>
        </ul>
    </div>
    <div ng-switch on="pic" ng-animate="'animate'" id="rotator" ng-repeat="image in images">
        <div ng-switch-when="{{$index + 1}}"><img ng-src="{{image}}"></div>
    </div>
</div>

css:

div#parent {
    display: inline-block;
    height: 570px;
    width: 800px;
    padding: 40px;
    background: rgb(203, 203, 203);
    background: -moz-linear-gradient(top, rgb(203, 203, 203) 0%, rgb(255, 255, 255) 50%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(203, 203, 203)), color-stop(50%, rgb(255, 255, 255)));
    background: -webkit-linear-gradient(top, rgb(203, 203, 203) 0%, rgb(255, 255, 255) 50%);
    background: -o-linear-gradient(top, rgb(203, 203, 203) 0%, rgb(255, 255, 255) 50%);
    background: -ms-linear-gradient(top, rgb(203, 203, 203) 0%, rgb(255, 255, 255) 50%);
    background: linear-gradient(to bottom, rgb(203, 203, 203) 0%, rgb(255, 255, 255) 50%);
}
div#rotator {
    height: 500px;
    width: 450px;
    float: right;
    position: absolute;
    left: 300px;
    overflow: hidden;

}

我需要 div#rotator 的形状类似于上面的 Div B .. 带有指向相应菜单的小曲线的矩形。关于如何创建它的任何想法？

简而言之，图像是普通的矩形图像，但应该像黑色 div 一样裁剪，并带有一个显示图像集类别的指针。

【问题讨论】：

我花了一段时间才弄清楚你到底想做什么。不过，这似乎是一个非常小的细节……你肯定不能只剪下几张色调与每张幻灯片大致匹配的三角形图像（比如漂亮的中间背景色），然后随着幻灯片的变化将它们换掉？在不使用某种“掩蔽”方法的情况下创建真正的透明度听起来颇具挑战。
实际上，只是为了补充我上面的评论，因为您确切地知道箭头在每张幻灯片上的垂直位置，您实际上可以对每个幻灯片进行精确的阴影和切割三角形的采样。然后在图片之间使用一点js淡入淡出，就无缝了。
也许我应该将其发布为答案，但我只有 65% 的把握确定我正确理解了您的问题。
是的，它是正确的，但是图像 div 有多个图像，从我的问题here 不断旋转，这使问题复杂化。
旋转图像具有可变的图像集。我将附上我的 php 后端和文件夹层次结构，以了解它在几个小时内应该如何工作。我现在需要离开。

标签： canvas html5-canvas html

【解决方案1】：

Html5 Canvas 可以使用它的剪辑功能来做你的指标

这是它的工作方式：

将画布放在一个 div 中。
告诉画布放置指示器的位置（“Y”坐标）。
告诉画布您要在不规则的画布 div 中剪辑哪个图像。

这是您调用以更改画布图像和指示器的函数：

        drawCanvasDiv(indicatorYPosition,yourImage);

这是绘制内部裁剪图像的不规则框的代码：

一旦您完全按照自己的喜好设置不规则 canvas-div 的样式……此代码将不会更改。

    function drawCanvasDiv(indicatorY,img){
        ctx.save();
        ctx.clearRect(0,0,w,h);

        // this call will define the path inside which the image will be clipped
        definePath(indicatorY);

        // clip any image inside the irregularly shaped path
        ctx.clip();

        // draw your desired image
        ctx.drawImage(img,0,0,img.width,img.height);

        // finally draw the gray border of the irregular shape
        definePath(indicatorY);
        ctx.lineWidth=2;
        ctx.strokeStyle="lightgray";
        ctx.stroke();
        ctx.restore();
    }

这是代码和小提琴：http://jsfiddle.net/m1erickson/KYMFn/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; padding:20px; }
    button{ margin:20px; }
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    var w=canvas.width;
    var h=canvas.height;
    var leftOffset=15;
    var indicatorHeight=20;
    var currentY=125;

    var img=new Image();
    img.onload=function(){
        drawCanvasDiv(currentY,img);
    }
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/skyGrass.png";


    function drawCanvasDiv(indicatorY,img){
        ctx.save();
        ctx.clearRect(0,0,w,h);
        definePath(indicatorY);
        ctx.clip();
        ctx.drawImage(img,0,0,img.width,img.height);
        definePath(indicatorY);
        ctx.lineWidth=2;
        ctx.strokeStyle="lightgray";
        ctx.stroke();
        ctx.restore();
    }

    function definePath(indicatorY){
        ctx.beginPath();
        ctx.moveTo(leftOffset,0);
        ctx.lineTo(w,0);
        ctx.lineTo(w,h);
        ctx.lineTo(leftOffset,h);
        ctx.lineTo(leftOffset,indicatorY+indicatorHeight/2);
        ctx.lineTo(0,indicatorY);
        ctx.lineTo(leftOffset,indicatorY-indicatorHeight/2);
        ctx.closePath();
    }


    $("#up").click(function(){
        if(currentY-20-indicatorHeight/2>0){ 
            currentY-=20; 
            drawCanvasDiv(currentY,img);
        }
    });

    $("#down").click(function(){
        if(currentY+20+indicatorHeight/2<h){ 
            currentY+=20; 
            drawCanvasDiv(currentY,img);
        }
    });


}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=248></canvas><br>
    <button id="up">Indicator Up</button>
    <button id="down">Indicator Down</button>
</body>
</html>

【讨论】：

哇……先生，您是我的救星。我没有使用 jQuery，但我可以从那里解决它。没有麻烦..非常感谢..

【解决方案2】：

不要在 CSS 中的元素中设置background: 或background-anything:，并使用具有透明度的图像，如background:url('img.png');。请记住，您不能在 img 标记中添加 HTML，因此也要避免使用它。

【讨论】：

是的，我现在知道在那个 div 上设置任何东西，但是我怎样才能在一个形状像这样的 div 中裁剪那个矩形图片呢？图片是矩形的
使用像 GIMP 这样的免费图像编辑器并创建一个矩形透明背景，然后在其上添加一个图层，在矩形内创建您的形状。您可以使用position:absolute; 来调整您想要使用 CSS 的图像的位置，只需确保您的父元素是 position:relative;。
我无法裁剪我无权访问的图像。他们将使用 CMS 上传图像，并且告诉他们完全像那样裁剪所有图像并不方便。而且我无法确保他们上传的图像与我的指针具有相同的精确坐标位置。唯一的办法就是让浏览器来塑造它。感谢您的选择。

【解决方案3】：

我为你创建了一个 JsFiddle。我所做的是在 Div 的一侧创建一个指针（纯粹使用 CSS - 就像你的黑盒子一样），并使用 JQuery 更改它指向的位置。

JsFiddle

告诉我这是不是你要找的。p>

Hope this works for you

干杯

编辑：我已经为你编辑了小提琴。 New Fiddle 。我无法准确地创建你想要的东西，所以我在这里做了第二好的解决方案。我给三角形赋予了一种不透明的浅色，使幻觉变得透明。问题是我使用边框创建了三角形。您不能为边框设置边框...（以使三角形的“填充”透明）。

CSS

#pointingDiv {
margin:20px;
width: 500px;
height: 350px;
position: relative;
background:url('http://thatgamecompany.com/wp-content/themes/thatgamecompany/_include/img/flower/flower-game-screenshot-2.jpg');
background-size: cover;
}
#pointingDiv:before {
content:"";
position: absolute;
right: 100%;
top: 20px;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-right: 15px solid rgba(255, 255, 0, .2);
border-bottom: 8px solid transparent;  
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

HTML

<div id="pointingDiv">   </div>

<p>Click here to change the pointer's location</p>

JS（包括 JQuery）

$('p').one('click',function(){
$('head').append('<style>#pointingDiv:before{top: 50px;}</style>');
});

如果您愿意在左侧稍微裁剪图像并使用过多的 JavaScript，我个人认为没有办法解决这个问题。

祝你好运

【讨论】：

它很接近，但我需要如上图所示，黑色的 div B 应该填充图像，其余的应该对 div A 背景透明。我放了黑色背景，因为 SO 的背景是白色的。我已经尝试稍微修改您的代码，但似乎无法达到我需要的效果。
编辑/更新了我的答案，但这就是我能想到的伙伴。希望你能得到你想要的，如果你也找到了如何在这里发布它;-)
@Thanos 请将代码 sn-ps 包含在您的答案中，这样即使 jsfiddle 消失了，未来的访问者也可以从中受益。