个人中心
文章发布
退出
作者热门文章
- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库？
- java - OnItemClickListener 不起作用，但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
24
4
我想为自定义 Logo 制作动画，就像典型的进度圈(例如百分比)。因此，我用描边创建了一个圆圈，并设置了一个指向 svg Logo 的剪辑路径。
我快完成了，但我需要将笔划动画的起点从左侧(参见代码)更改为顶部 - 或箭头旁边。这样进度就从其中一个箭头开始。 stroke-dasharray 和 stroke-dashoffset 的不同值将不起作用。
<html>
<head>
<title></title>
<style type="text/css">
path.progress-logo {
stroke-dasharray: 204.243;
stroke-dashoffset: 122.763;
}
</style>
</head>
<body>
<svg id="svg2">
<path fill="#E2E2E1" d="M100,39.414L81.975,21.982L63.89,39.414h9.86v30.97H17.164V23.659h42.563l-0.033,11.304l18.028-17.729
L59.799-0.28l-0.031,10.737H18.281c-7.164,0-12.001,1.232-14.512,3.702C1.257,16.627,0,21.212,0,27.917v38.904
c0,6.752,1.257,11.35,3.768,13.794c2.511,2.443,7.348,3.665,14.512,3.665h54.283c7.165,0,12.003-1.222,14.514-3.665
c2.511-2.444,3.769-7.042,3.769-13.794V39.414H100z"/>
<defs>
<clipPath id="cut-off-bottom">
<path fill="#E2E2E1" d="M100,39.414L81.975,21.982L63.89,39.414h9.86v30.97H17.164V23.659h42.563l-0.033,11.304l18.028-17.729
L59.799-0.28l-0.031,10.737H18.281c-7.164,0-12.001,1.232-14.512,3.702C1.257,16.627,0,21.212,0,27.917v38.904
c0,6.752,1.257,11.35,3.768,13.794c2.511,2.443,7.348,3.665,14.512,3.665h54.283c7.165,0,12.003-1.222,14.514-3.665
c2.511-2.444,3.769-7.042,3.769-13.794V39.414H100z"/>
</clipPath>
</defs>
<path class="progress-logo" d="m0.66666,46.55556c0,-22.98956 18.62155,-41.61111 41.61111,-41.61111c22.98957,0 41.61111,18.62155 41.61111,41.61111c0,22.98956 -18.62154,41.61111 -41.61111,41.61111c-22.98956,0 -41.61111,-18.62155 -41.61111,-41.61111z" clip-path="url(#cut-off-bottom)" stroke-width="40" fill="none" stroke="#1ECD97" />
</svg>
</body>
</html>
这是我当前的代码:http://jsfiddle.net/w5huatyf/
感谢您的帮助!
最佳答案
你的答案在这里:
http://jsfiddle.net/w5huatyf/2/
function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;
return {
x: centerX + (radius * Math.cos(angleInRadians)),
y: centerY + (radius * Math.sin(angleInRadians))
};
}
function describeArc(x, y, radius, startAngle, endAngle){
var start = polarToCartesian(x, y, radius, endAngle);
var end = polarToCartesian(x, y, radius, startAngle);
var arcSweep = endAngle - startAngle <= 180 ? "0" : "1";
var d = [
"M", start.x, start.y,
"A", radius, radius, 0, arcSweep, 0, end.x, end.y,
"L", x,y,
"L", start.x, start.y
].join(" ");
return d;
}
var percent = 0;
var startValue = 43;
var endValue = 360+startValue-0.01;
function count(){
if(percent < startValue)
percent = startValue;
else
percent++;
if(percent > endValue)
percent = endValue;
document.getElementById("arc1").setAttribute("d", describeArc(50, 50, 60, startValue, percent));
document.getElementById("vals").innerHTML = percent + ' Degree';
if(percent < endValue)
window.setTimeout(function() { count(); }, 30);
}
window.setTimeout(function() { count( ); }, 30);
count(0,359);
这是一个简单的计时器，每次使用计时器替换弧值。
我使用了其他一些答案。这里有一些:
计时器:https://stackoverflow.com/a/33676171/2655623(我自己回答的)
画饼:https://stackoverflow.com/a/24569190/2655623(结果对我没用，但是函数有用)
如果您需要帮助解释代码，请告诉我。
关于html - 如何更改 SVG 图像中 stroke-dasharray 的 "starting point"？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25189416/
24
4
0
为什么这不返回每个社区(边界框)中的点数？ import geopandas as gpd def radius(points_neighbour, points_center, new_field_
嘿! 我有一张图片，我想在该图片上选择一个点并告诉它应该变换到哪个坐标。我想为一些数字点做这个。当我完成时，整个图像会发生变化，因此会考虑局部性。 最重要的是，我可以选择任意多的点，并且所选的点会转换
我有代码: class Point3D{ protected: float x; float y; float z; public:
我正在开发我的第一个 Spring Boot + Spring Data JPA + Hibernate 5，在 PostgreSQL 上工作数据库。 我在尝试映射具有 point 作为数据类型的字段
当我尝试编译这个简单的代码时，我在构造函数中遇到了两个错误:“类型值不能用作默认参数”我该如何解决这个问题？ public class PointerArgs { public P
当我尝试编译这个简单的代码时，我在构造函数中遇到了两个错误:“类型值不能用作默认参数”我该如何解决这个问题？ public class PointerArgs { public P
目前我正在实现一项提供集体旅行的交通服务，但我遇到了一个问题: 假设我在下图中得到了点 G = {A,B,C,D,F,R,W} =>。 当用户选择 from(A) -> to(W) 时，它们之间有点:
我有一个名为 Shop 的实体，它有一个名为 Position 的 DBGeorgpraphy 列 数据库中的示例商店的位置值为 POINT (145.034242 -37.825519) 我正在尝试
我看了几个类似的帖子，但我要么不明白他们提供的是什么，要么他们似乎不适用。我是新来的，我会尽力遵守规则。 我们在类(class)的最后 2 周学习 c++，期末学习 40 小时 :)，所以我是初学者。
我正在使用 tf2 将点从源帧转换为目标帧。下面是代码片段: import tf2_ros import tf2_geometry_msgs transform = tf_buffer.lookup_
我需要找到一种算法，根据给定的一组大小为 n 的点 S 计算凸包。我知道 S 正好有 6 个点 构成了凸包。 最好和最有效的方法是什么？ 我想从 S 生成所有可能的点组合(这将是 n 选择 6 个点)
我有一个在屏幕坐标中的 CGPoint。我还有一个应用了变换矩阵(缩放、旋转和平移)的 CALayer。 如何将屏幕坐标中的点转换为图层的局部坐标？ 最佳答案 CALayer 有执行此操作的方法，请在
我正在创建自定义控件，它将从点列表(或数组)中绘制形状。我已经完成了基本的绘图功能，但现在我正在为 Visual Studio 中的设计时支持而苦苦挣扎。 我创建了两个属性: private Poin
此函数是从“JavaScript:权威指南”复制的，但由于某种原因它不起作用... **points.dist = function () { ^ ReferenceError: 点未定义**我对此很
我有一个像这样的自定义适配器: private List items = new ArrayList<>(); private Context context; public UserSpinnerA
代码: UPDATE tbl_name SET points = points + 1 WHERE 'GAME 1' LIKE "%Vikes%" GAME 1 列包含包含 Vikes
我有一个点。我正在尝试将 x 作为 int。如果我使用 Point.x，我将得到 x 作为 int。但我的印象是我应该尽可能使用 setter/getter ( Why use getters and
我正在开发一个小型信誉系统，但遇到了一个问题。 因此，在我的示例中，我想为 4 种不同类型的用户创建一个图片网站；我们称他们为:业余、好、非常好、专业。 每个用户可以上传一张图片，这张图片可以被其他用
我有一个关于事件形状模型的问题。我正在使用 T. Coots 的论文(可以找到 here 。) 我已经完成了所有初始步骤(Procrustes 分析计算平均形状，PCA 减少尺寸)但仍停留在拟合上。
Android moving Image one point (0,0) to another point (30,400). using animation or normal looping co
我是一名优秀的程序员,十分优秀！