格转动但div的裁剪框不 [英] div rotates but div's clipping box does not

问题描述

相关小提琴

试图建立一个没有JS库（如拉斐尔）这个整洁的小计，我想出了你可以找到<一个问题href=\"http://stackoverflow.com/questions/20662834/overflow-hidden-border-radius-and-transform-in-android-browser\">here.太多的无奈之后，我想到了另一个布局，用以使这个工作表（即围绕一个单独的已知Chrome有错误，工作也一样），它可以在小提琴上面看到的。

Trying to build this neat little meter without a JS library (like Raphael), I came up with a question you can find here. After much frustration, I thought of another layout with which to make this meter work (that worked around a separate known Chrome bug as well), which can be seen at the fiddle above.

<div id="clipper">
    <div id="round">
    </div>
    <div id="clipper2">
        <div id="meter"></div>
    </div>
</div>

不过，这创造了一个全新的Andr​​oid（4.0.4至少）浏览器的缺陷。裁剪框 DIV 元素旋转预期。然而，实际计算出的削波箱具有水平和垂直边界，其中包括可见形状。本质上，这意味着子元素通常限幅平方，代替沿该元件的旋转边缘

However, this created a completely NEW Android (4.0.4 at least) browser defect. The clipping box div element rotates as expected. However, the actual calculated clipping box has horizontal and vertical boundaries, which encompass the visible shape. Essentially, it means that child elements are always clipped square, instead of along the rotated edges of the element.

电表本身有一些不寻常的要求，否则这将是比较容易做的事：它不是一个完整的半圈，但切掉圆弧的顶部。它也必须绕此切片的点底部中心，而不是什么会是圆的中心

The meter itself has some unusual requirements, else this would be easier to do: it's not a full half circle, but a slice off the top of an arc. It must also rotate around a point bottom center of this slice, not what would be the center of the circle.

推荐答案

与SVG尝试：的http：//的jsfiddle .NET / 8fsS2 / 4 /

HTML

<svg id="generate" version="1.1" xmlns="http://www.w3.org/2000/svg"
    width="500px" height="120px" viewBox="0 0 200 120" preserveAspectRatio="none">
        <g id="chart"></g>
</svg>

使用Javascript：

Javascript:

function deg2rad(deg) {
        return deg * Math.PI / 180;
    }

    function annularSector(centerX, centerY, startAngle, endAngle, innerRadius, outerRadius) {
        startAngle = deg2rad(startAngle + 180);
        endAngle = deg2rad(endAngle + 180);

        var p = [
                [centerX + innerRadius * Math.cos(startAngle),  centerY + innerRadius * Math.sin(startAngle)]
            , [centerX + outerRadius * Math.cos(startAngle),    centerY + outerRadius * Math.sin(startAngle)]
            , [centerX + outerRadius * Math.cos(endAngle),      centerY + outerRadius * Math.sin(endAngle)]
            , [centerX + innerRadius * Math.cos(endAngle),      centerY + innerRadius * Math.sin(endAngle)]
            ];

        var angleDiff = endAngle - startAngle
            , largeArc = (angleDiff % (Math.PI * 2)) > Math.PI ? 1 : 0;

        var commands = [];

        commands.push("M" + p[0].join());
        commands.push("L" + p[1].join());
        commands.push("A" + [outerRadius, outerRadius].join() + " 0 " + largeArc + " 1 " + p[2].join());
        commands.push("L" + p[3].join());
        commands.push("A" + [innerRadius, innerRadius].join() + " 0 " + largeArc + " 0 " + p[0].join());
        commands.push("z");

        return commands.join(" ");
    }

    function create(type, attr, parent) {
        var element = document.createElementNS("http://www.w3.org/2000/svg", type);
        if (attr) for (var name in attr) element.setAttribute(name, attr[name]);
        if (parent) parent.appendChild(element);
        return element;
    }
    var svg = document.querySelector("svg#generate g#chart");
    create("path", {
        fill: "#FF0000",
        d: annularSector(80, 80, 0, 180, 0, 80)
    }, svg);


    create("path", {
        fill: "#00FF00",
        d: annularSector(80, 80, 0, 65, 0, 80)
    }, svg);

调整视框中规模。

adjust the viewBox to scale.

这篇关于格转动但div的裁剪框不的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！