gpt4 book ai didi

android - div旋转但div的裁剪框不旋转

转载 作者:行者123 更新时间:2023-11-29 16:04:25 30 4
gpt4 key购买 nike

Related fiddle

试图在没有 JS 库(如 Raphael)的情况下构建这个简洁的小仪表,我想出了一个问题,你可以找到 here .在经历了很多挫折之后,我想到了另一种布局来使这个仪表工作(也解决了一个单独的已知 Chrome 错误),可以在上面的 fiddle 中看到。

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

但是,这造成了一个全新的 Android(至少 4.0.4)浏览器缺陷。剪辑框 div 元素按预期旋转。但是,实际计算出的裁剪框具有水平和垂直边界,它们包含可见形状。从本质上讲,这意味着子元素总是被裁剪成正方形,而不是沿着元素的旋转边缘。

仪表本身有一些不寻常的要求,否则这会更容易做到:它不是完整的半圆,而是圆弧顶部的一部分。它还必须围绕该切片的底部中心点旋转,而不是圆的中心。

最佳答案

尝试使用 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);

调整 viewBox 以缩放。

关于android - div旋转但div的裁剪框不旋转,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20665031/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com