格旋转，但div的裁剪框不

试图建立没有JS库（如拉斐尔）这个整洁的小计，我想出了你可以找到here的问题。经过很多挫折之后，我想到了另一种布局，它可以让这个电表工作（这个电路可以解决一个已知的Chrome问题），可以在上面的提琴中看到。

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

但是，这创造了一个全新的Android（至少4.0.4）浏览器缺陷。剪辑框div元素按预期旋转。但是，实际计算的剪裁框具有水平和垂直边界，其包含可见形状。实质上，这意味着子元素始终是正方形的，而不是沿着元素的旋转边。

电表本身有一些不寻常的要求，否则这将更容易做到：它不是一个完整的半个圆，而是一个圆弧顶部的切片。它也必须围绕此切片的点底部中心旋转，而不是圆的中心。

来源

2013-12-18 Randy Hall

尝试用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：

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);

调整缩放视框。

来源

2013-12-23 10:59:17

Android真的，真的不喜欢transform: translateZ(0);。完全一样。无处不在。如果此属性位于该树中的任何元素上，则整个事件都会失败。

更新小提琴的作品： http://jsfiddle.net/FB6rf/15/

如果任何人有一个解释这种行为，我所有的耳朵。因为否则* poof *，我出局100赏金。也许如果有些用户告诉我一些爱，它不会是如此大的损失。

来源

2013-12-20 19:49:04

格旋转，但div的裁剪框不

回答

相关问题