求教,贝塞尔曲线的运动轨迹

WDYDXF 2013-08-05 09:21:36
想实现的效果是:
1.有一个画板,用户使用鼠标,画出一个贝塞尔曲线.
2.放置一个div,使div,能够沿着贝赛尔曲线运动;

兼容性:
1.浏览器兼容性的问题:ie10,firefox最新版,safari最新版,其他浏览器不考虑;

求教问题:
1. 针对这种需求,求教一个比较完美的解决方案:
是采用,svg, js+html, css3+js, vml, html5+css3.
哪种技术,比较好.请不吝赐教.

2. 如第一条,恳请有经验人士,指导一下小弟.

谢谢
...全文
526 12 打赏 收藏 转发到动态 举报
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
WDYDXF 2013-08-06
  • 打赏
  • 举报
 回复
引用 11 楼 fzfei2 的回复:
canvas 是个画布，就像画笔画画一样，canvas没有层， 只有整个canvas能响应事件，里面图形事件响应只能用坐标模拟 你要事件响应用svg
恩,谢谢指点
fzfei2 2013-08-06
  • 打赏
  • 举报
 回复
canvas 是个画布，就像画笔画画一样，canvas没有层， 只有整个canvas能响应事件，里面图形事件响应只能用坐标模拟 你要事件响应用svg
WDYDXF 2013-08-06
  • 打赏
  • 举报
 回复
引用 8 楼 fzfei2 的回复:
[quote=引用 2 楼 WDYDXF 的回复:] [quote=引用 1 楼 fzfei2 的回复:] IE的只兼容IE10以用svg,什么HTML,css 这都是页面排版问题了
谢谢回复,请问如果我想鼠标绘制贝赛尔曲线,有什么例子吗?多谢[/quote] 用canvas 写了个例子，你参考一下 路径我是通过canvas像素取的，你最好有贝赛尔曲线路径的算法 

<!DOCTYPE html>
<html>
<head>
<meta charset="gb3212">
<style type="text/css">
    body{margin:0;}
    canvas{margin: 0px;}
</style>
</head>
<body  >
<style>
	#canvas{
		position: absolute;
		left:50px;
		top:50px;
	}
	#div1{
			position: absolute;
			background-color:blue;
			width:5px;
			height:5px;
	}
</style>
<div id="div1"></div>
<canvas id="canvas"    width="200" height="200" style="border: 1px solid #ccc;"></canvas>
 
<button id="bnt" onclick="beginDraw()">开始画贝塞尔曲线</button>
<button id="bnt" onclick="play()">沿着贝赛尔曲线运动</button>
先点"开始画贝塞尔曲线",在方框点三次不同坐标,生成曲线后，点第二按钮
 
<script>
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
var ctx=context;
var bnt=document.getElementById('bnt');

var isDraw=0,drawIndex=0,drawPs=[];
function beginDraw(){ 
		ctx.restore(); 
		ctx.clearRect(0,0,200,200);
		isDraw=1;
		drawIndex=0;
		drawPs=[];
		bnt.disabled=true;
		
}
canvas.onmousedown=function(evt){
	if(!isDraw) return ;
	evt=evt||window.event;
 
	pt=[evt.offsetX,evt.offsetY]
	 drawPs[ drawIndex++]=pt;
	 if(drawIndex==3){
	 	 	bnt.disabled=false;
	 	 	isDraw=0;
	 	 	ctx.clearRect(0,0,200,200);
	 	 	draw.apply(this, drawPs);
	 }else{
 
		ctx.beginPath();
		ctx.strokeStyle = '#00f'; 
		context.arc( pt[0],pt[1], 2, 0, Math.PI * 2, true);
 
		ctx.stroke();
	 }
 
}
function draw(a,b,c) {
 
    ctx.beginPath();  
    ctx.lineWidth=1;
    ctx.moveTo(a[0],a[1]);  
    ctx.quadraticCurveTo( b[0],b[1] ,c[0],c[1] ); 
    ctx.strokeStyle = '#f00'; 
    ctx.stroke();  
             
}

//取出红色的路径
function getPs(){
	var i=0,ps=[],W=200,H=200;
	var md= ctx.getImageData(0,0,W,H);
	for(var y=0;y< W;y++){
		for(var x=0;x< H;x++ ){
			i=(x+y*W)*4;
			if( md.data[i]  ) ps.push([x,y]);
		}	
	}
	return ps;
}
//播放路径动画
var playTir;
function play(){
	 if(!drawPs.length) return;
	 var ps= getPs();
	 if(!ps.length) return;
	 xy= Math.abs( drawPs[0][0]-drawPs[2][0]) >Math.abs( drawPs[0][1]-drawPs[2][1] )?0:1;
	 ps.sort(function(a,b){ return  a[xy]-b[xy]  });
	 var left=canvas.offsetLeft,top=canvas.offsetTop;
	var L=ps.length;
	playTir=setInterval(function(){
		if( (L-=2)<=0 ) return clearInterval(playTir);
		div1.style.left=(ps[L][0]+left)+'px'
		div1.style.top=(ps[L][1]+top)+'px' 
	},1);
}
</script>
</body>
</html>
[/quote] 早上好. 高手就是高手,写的例子简单易懂,非常感谢. 请问canvas里的所有图形,有类似z-index的属性吗?因为想判断鼠标点击的是哪一个图形(这些图形还有重叠,因此需要判断z-index)
NancyChan_ 2013-08-05
  • 打赏
  • 举报
 回复
引用 3 楼 xuzuning 的回复:
可参考 http://paperjs.org/examples/chain/
+1...已收藏
wohuifude123 2013-08-05
  • 打赏
  • 举报
 回复
那网址例子不错，不过找不到关键算法 这个主要需要算法，找到关键算法才最重要
fzfei2 2013-08-05
  • 打赏
  • 举报
 回复
3 楼 http://paperjs.org/examples/chain/ 这很NB
WDYDXF 2013-08-05
  • 打赏
  • 举报
 回复
引用 3 楼 xuzuning 的回复:
可参考 http://paperjs.org/examples/chain/
版主厉害.我先研究一下去
xuzuning 2013-08-05
  • 打赏
  • 举报
 回复
可参考 http://paperjs.org/examples/chain/
WDYDXF 2013-08-05
  • 打赏
  • 举报
 回复
引用 1 楼 fzfei2 的回复:
IE的只兼容IE10以用svg,什么HTML,css 这都是页面排版问题了
谢谢回复,请问如果我想鼠标绘制贝赛尔曲线,有什么例子吗?多谢
fzfei2 2013-08-05
  • 打赏
  • 举报
 回复
IE的只兼容IE10以用svg,什么HTML,css 这都是页面排版问题了
fzfei2 2013-08-05
  • 打赏
  • 举报
 回复
引用 2 楼 WDYDXF 的回复:
[quote=引用 1 楼 fzfei2 的回复:] IE的只兼容IE10以用svg,什么HTML,css 这都是页面排版问题了
谢谢回复,请问如果我想鼠标绘制贝赛尔曲线,有什么例子吗?多谢[/quote] 用canvas 写了个例子，你参考一下 路径我是通过canvas像素取的，你最好有贝赛尔曲线路径的算法 

<!DOCTYPE html>
<html>
<head>
<meta charset="gb3212">
<style type="text/css">
    body{margin:0;}
    canvas{margin: 0px;}
</style>
</head>
<body  >
<style>
	#canvas{
		position: absolute;
		left:50px;
		top:50px;
	}
	#div1{
			position: absolute;
			background-color:blue;
			width:5px;
			height:5px;
	}
</style>
<div id="div1"></div>
<canvas id="canvas"    width="200" height="200" style="border: 1px solid #ccc;"></canvas>
 
<button id="bnt" onclick="beginDraw()">开始画贝塞尔曲线</button>
<button id="bnt" onclick="play()">沿着贝赛尔曲线运动</button>
先点"开始画贝塞尔曲线",在方框点三次不同坐标,生成曲线后，点第二按钮
 
<script>
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
var ctx=context;
var bnt=document.getElementById('bnt');

var isDraw=0,drawIndex=0,drawPs=[];
function beginDraw(){ 
		ctx.restore(); 
		ctx.clearRect(0,0,200,200);
		isDraw=1;
		drawIndex=0;
		drawPs=[];
		bnt.disabled=true;
		
}
canvas.onmousedown=function(evt){
	if(!isDraw) return ;
	evt=evt||window.event;
 
	pt=[evt.offsetX,evt.offsetY]
	 drawPs[ drawIndex++]=pt;
	 if(drawIndex==3){
	 	 	bnt.disabled=false;
	 	 	isDraw=0;
	 	 	ctx.clearRect(0,0,200,200);
	 	 	draw.apply(this, drawPs);
	 }else{
 
		ctx.beginPath();
		ctx.strokeStyle = '#00f'; 
		context.arc( pt[0],pt[1], 2, 0, Math.PI * 2, true);
 
		ctx.stroke();
	 }
 
}
function draw(a,b,c) {
 
    ctx.beginPath();  
    ctx.lineWidth=1;
    ctx.moveTo(a[0],a[1]);  
    ctx.quadraticCurveTo( b[0],b[1] ,c[0],c[1] ); 
    ctx.strokeStyle = '#f00'; 
    ctx.stroke();  
             
}

//取出红色的路径
function getPs(){
	var i=0,ps=[],W=200,H=200;
	var md= ctx.getImageData(0,0,W,H);
	for(var y=0;y< W;y++){
		for(var x=0;x< H;x++ ){
			i=(x+y*W)*4;
			if( md.data[i]  ) ps.push([x,y]);
		}	
	}
	return ps;
}
//播放路径动画
var playTir;
function play(){
	 if(!drawPs.length) return;
	 var ps= getPs();
	 if(!ps.length) return;
	 xy= Math.abs( drawPs[0][0]-drawPs[2][0]) >Math.abs( drawPs[0][1]-drawPs[2][1] )?0:1;
	 ps.sort(function(a,b){ return  a[xy]-b[xy]  });
	 var left=canvas.offsetLeft,top=canvas.offsetTop;
	var L=ps.length;
	playTir=setInterval(function(){
		if( (L-=2)<=0 ) return clearInterval(playTir);
		div1.style.left=(ps[L][0]+left)+'px'
		div1.style.top=(ps[L][1]+top)+'px' 
	},1);
}
</script>
</body>
</html>
WDYDXF 2013-08-05
  • 打赏
  • 举报
 回复
引用 6 楼 KiteRunner_ 的回复:
[quote=引用 3 楼 xuzuning 的回复:] 可参考 http://paperjs.org/examples/chain/
+1...已收藏[/quote] 只收藏,有什么好的想法吗
贝塞尔曲线拟合效果非常好
有关三次贝塞尔曲线拟合，拟合效果可控！本资源是来源于外国作者，所以资料的质量非常好，matlab解释很详细明了！
Android 利用三阶贝塞尔曲线绘制运动轨迹的示例
本篇文章主要介绍了Android 利用三阶贝塞尔曲线绘制运动轨迹的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Android进阶之高级UI
本课程采用理论、源码和实战相结合的方式来讲解Android 中 UI 高级的高级应用。课程内容涉及Activity启动流程，UI绘制的流程及原理Android画笔，画布，动画，贝塞尔曲线，滤镜等。实战带大家实现相机各种滤镜效果，和粒子爆炸效果。有问题欢迎私信我，我看到会第一时间回复。课程大纲如下：第一部分  原理篇 1、UI得绘制原理2、Activity得启动流程3、UI得绘制流程三大步骤详解。第二部分  实用演练 1、画笔得高阶应用2、滤镜得原理3、滤镜的实现4、图层混合模式 XFERMODE5、Cavas高级应用6、粒子爆炸效果7、canvas实战8、Path详解9、Path实战10、贝塞尔曲线11、贝塞尔曲线实战12、PathMeasure探索113、PathMeasure探索2第三部分 实战篇 1、属性动画实战2、仿小红书引导页平行动画1（思路分析）3、仿小红书引导页平行动画2（代码实战） 4、仿小红书引导页平行动画3（代码实战）
python实现贝塞尔（Bezier）曲线画法
应用python实现贝塞尔曲线，并应用wx python图像显示功能展现所画曲线。使用时需安装wx（内付安装程序）
Android 属性动画使控件沿贝塞尔曲线移动
项目中抽取出来的通过属性动画使空间沿贝塞尔曲线运动，运动时长，幅度可自己控制，同时可以给控件设置点击事件。
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章