Android div旋转,但div';s剪辑框不可用
试图在没有JS库的情况下构建这个整洁的小仪表(比如Raphael),我提出了一个你可以找到的问题。在经历了很多挫折之后,我想到了另一种布局,可以让这个仪表工作(它也可以解决一个已知的Chrome bug),可以在上面的提琴上看到Android div旋转,但div';s剪辑框不可用,android,css,rotation,overflow,hidden,Android,Css,Rotation,Overflow,Hidden,试图在没有JS库的情况下构建这个整洁的小仪表(比如Raphael),我提出了一个你可以找到的问题。在经历了很多挫折之后,我想到了另一种布局,可以让这个仪表工作(它也可以解决一个已知的Chrome bug),可以在上面的提琴上看到 <div id="clipper"> <div id="round"> </div> <div id="clipper2"> <div id="meter"></d
<div id="clipper">
<div id="round">
</div>
<div id="clipper2">
<div id="meter"></div>
</div>
</div>
然而,这创造了一个全新的Android(至少是4.0.4)浏览器缺陷。剪裁框div
元素按预期旋转。但是,实际计算的剪裁框具有水平和垂直边界,其中包含可见形状。从本质上说,这意味着子元素总是被剪裁成正方形,而不是沿着元素的旋转边
仪表本身有一些不寻常的要求,否则这将更容易做到:它不是一个完整的半圆,而是一个圆弧顶部的一片。它还必须围绕该切片底部的一个点中心旋转,而不是围绕圆的中心旋转。Android真的,真的不喜欢transform:translateZ(0)代码>。完全在任何地方如果该属性位于该树中的任何元素上,则整个操作将失败 最新的小提琴作品:
如果有人对这种行为有解释,我洗耳恭听。因为否则,我就失去了100英镑的赏金。也许如果一些用户给我一些爱,这不会是一个很大的损失 Android真的,真的不喜欢
transform:translateZ(0)代码>。完全在任何地方如果该属性位于该树中的任何元素上,则整个操作将失败
最新的小提琴作品:
如果有人对这种行为有解释,我洗耳恭听。因为否则,我就失去了100英镑的赏金。也许如果一些用户给我一些爱,这不会是一个很大的损失 尝试使用SVG:
HTML:
调整viewBox以缩放。尝试使用SVG:
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>
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);