0

我需要在 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 一样裁剪，并带有一个显示图像集类别的指针。

4

3 回答 3

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>
于 2013-07-16T19:06:24.077 回答
0

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

提琴手

告诉我这是否是你要找的。

Hope this works for you

干杯

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

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，我个人认为没有办法摆脱这种情况。

祝你好运

于 2013-07-16T03:45:22.440 回答
0

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

于 2013-07-16T02:36:49.297 回答