Raphael 目标点沿路径不断移动

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Raphaël · Gear</title>
<link rel="stylesheet" href="demo.css" media="screen">
<link rel="stylesheet" href="demo-print.css" media="print">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<script src="scripts/raphael.js"></script>
<script>
Raphael("holder", 640, 480, function () {
var r = this,
//p = r.path("M295.186,122.908c12.434,18.149,32.781,18.149,45.215,0l12.152-17.736c12.434-18.149,22.109-15.005,21.5,6.986l-0.596,21.49c-0.609,21.992,15.852,33.952,36.579,26.578l20.257-7.207c20.728-7.375,26.707,0.856,13.288,18.29l-13.113,17.037c-13.419,17.434-7.132,36.784,13.971,43.001l20.624,6.076c21.103,6.217,21.103,16.391,0,22.608l-20.624,6.076c-21.103,6.217-27.39,25.567-13.971,43.001l13.113,17.037c13.419,17.434,7.439,25.664-13.287,18.289l-20.259-7.207c-20.727-7.375-37.188,4.585-36.578,26.576l0.596,21.492c0.609,21.991-9.066,25.135-21.5,6.986L340.4,374.543c-12.434-18.148-32.781-18.148-45.215,0.001l-12.152,17.736c-12.434,18.149-22.109,15.006-21.5-6.985l0.595-21.492c0.609-21.991-15.851-33.951-36.578-26.576l-20.257,7.207c-20.727,7.375-26.707-0.855-13.288-18.29l13.112-17.035c13.419-17.435,7.132-36.785-13.972-43.002l-20.623-6.076c-21.104-6.217-21.104-16.391,0-22.608l20.623-6.076c21.104-6.217,27.391-25.568,13.972-43.002l-13.112-17.036c-13.419-17.434-7.439-25.664,13.288-18.29l20.256,7.207c20.728,7.374,37.188-4.585,36.579-26.577l-0.595-21.49c-0.609-21.992,9.066-25.136,21.5-6.986L295.186,122.908z").attr({stroke: "#666", opacity: .3, "stroke-width": 10}),
p = r.path(‘M 20,170 c130,40,180,150,260,190 z‘).attr({stroke: "#666", opacity: .3, "stroke-width": 10});
over = r.path().attr({stroke: "#fff"}),
len = p.getTotalLength(),

//移动的小点
e = r.ellipse(0, 0, 7, 3).attr({stroke: "none", fill: "#a34e37"}).onAnimation(function () {
//var t = this.attr("transform");
//over.attr({path: "M316,248L" + t[0][1] + "," + t[0][2] + "z"});
});
//r.circle(316, 248, 5).attr({stroke: "none", fill: "#fff"});
r.customAttributes.along = function (v) {
var point = p.getPointAtLength(v * len);
return {
transform: "t" + [point.x, point.y] + "r" + point.alpha
};
};
e.attr({along: 0});

var rotateAlongThePath = true;
function run() {
e.animate({along: 1}, 2e3, function () {
e.attr({along: 0});
setTimeout(run);
});
}
run();

// logo

});
</script>
</head>
<body>
<div id="holder" style="background-color: #f0f0f0;"></div>
</body>
</html>

时间: 2024-10-07 13:50:49

Raphael 目标点沿路径不断移动的相关文章

访问servlet的路径问题

一.url-pattern的三种配置 在web.xml配置文件中配置有关Servlet的时候,<url-pattern>标签是用于配置当前Servlet拦截的路径,也就是说,客户端浏览器访问<url-pattern>标签配置的路径才能访问对应Servlet内容. 关于拦截路径的配置方式其实有三种方式: 完全路径匹配:是以"/"开始,路径中间不能包含通配符"*",例如:/firstServclet,表示访问路径为http://localhost

用GL画出人物的移动路径

注意:用Debug画的线会存在穿透问题 没啥好解释的,直接看代码: using UnityEngine; using System.Collections; using System.Collections.Generic; /* * 找不到设置线宽的方法,目前的解决方法就是用画矩形代替画线来实现线的粗细 */ /// <summary> /// 必须将此脚本放在摄影机上才能看到绘画内容,DebugDraw可以不用,但DebugDraw画的内容 /// 只能在编辑模式下看得到. /// <

Raphael.js API之Raphael.pathIntersection(),aphael.pathToRelative(),Set.clear(),Set.exclude(element)

/*API-141*/Raphael.pathIntersection(path1, path2)获取两条线的交点参数列表:path1    字符串类型    路径的字符串表达形式path2    字符串类型    路径的字符串表达形式返回值:交点集合,格式如下:[{    x:       //number类型 点的x坐标    y:       //number类型 点的y坐标    t1:      //number类型   value for segment of path1(不太确定中

.NET图片操作类,包含图片格式转换、图片缩放、 文字水印、图片水印、路径转换

using System;using System.Collections.Generic;using System.Text;using System.IO;using System.Drawing.Imaging;using System.Drawing;using System.Web;namespace ZC.Utils{  public  static class ImageHelper  { #region 图片格式转换      /// <summary>      /// 图片

idea编译器中maven项目获取路径的方法

资源文件放在哪里? 上 图中的 resources 目录叫资源目录 (main下,与java如果没有请自行创建), 在项目编译后文件会被放到红色的 classes 目录下, 注意如果你的 resources 目录没有上图的那个金色资源目录图标, 请再 idea 上右键该目录选择 Mark directory as - Resources Root, 这样, 在项目编译以后, 你的资源就会放到编译目录下. 如何获得这些文件? 当资源文件被编译到编译目录下以后, 我们可以通过 Class.getRe

RRT路径规划算法概述

本文主要记录本人之前调研过在三维复杂环境下的路径规划算法. RRT快速随机搜索树 快速扩展随机树(Rapidly-exploring Random Trees,RRT)算法,是近十几年得到广泛发展与应用的基于采样的运动规划算法,它由美国爱荷华州立大学的Steven M. LaValle教授在1998 年提出.RRT 算法是一种在多维空间中有效率的规划方法.原始的RRT 算法是通过一个初始点作为根节点,通过随机采样,增加叶子节点的方式,生成一个随机扩展树,当随机树中的叶子节点包含了目标点或进入了目

LeetCode 113. 路径总和 II(Path Sum II)

题目描述 给定一个二叉树和一个目标和,找到所有从根节点到叶子节点路径总和等于给定目标和的路径. 说明: 叶子节点是指没有子节点的节点. 示例: 给定如下二叉树,以及目标和 sum = 22, 5 / 4 8 / / 11 13 4 / \ / 7 2 5 1 返回: [ [5,4,11,2], [5,8,4,5] ] 解题思路 从树根开始遍历,记录当前路径和,递归向下访问子节点并添加到路径中,若碰到叶节点,判断当前路径和是否等于目标值,若等于就把当前路径加入到结果集中. 代码 1 /** 2 *

LeetCode 113. Path Sum II路径总和 II (C++)

题目: Given a binary tree and a sum, find all root-to-leaf paths where each path's sum equals the given sum. Note: A leaf is a node with no children. Example: Given the below binary tree and sum = 22, 5 / 4 8 / / 11 13 4 / \ / 7 2 5 1 Return: [ [5,4,11

Unity---DOTween插件学习(3)---获取数据、协程、路径动画

目录 10.获取数据 11.携程 12.路径动画 本文及系列参考于Andy老师的DOTween系列 欢迎大家关注Andy老师 10.获取数据 类方法 返回所有暂停的动画,没有则返回null var list = DOTween.PausedTweens(); 返回所有真正播放的动画,没有则返回null var list = DOTween.PlayingTweens(); 获取给定ID的数组 var list = DOTween.TweensById("id", true); //第一