贝塞尔曲线的可视化操作实现——Photoshop钢笔工具的初级模拟

贝塞尔曲线的可视化操作实现——Photoshop钢笔工具的初级模拟
作者：Neoxone 发表时间： 2010年09月16号，星期四阅读：8,573 次

贝塞尔曲线在数字绘图中有着非常重要的地位，你可能使用过photoshop的钢笔工具，那就是贝塞尔曲线的应用。
在html5的canvas中也得到了实现，即bezierCurveTo函数。
虽然功能不错，但是凭空使用 bezierCurveTo来绘图可不是件方便的事。
他的6个参数：（控制点1的坐标X，控制点1的坐标y，控制点2的坐标x，控制点2的坐标y，终点坐标x，终点坐标y）并不是你一见就能知道最终效果的。
黑客帝国中的那种通过没有数字视频解码器的显示设备，纯粹看代码来监视母体世界的能力，不是一时半会能够修炼的出来的。

下面的demo就提供了这种类似数字解码功能，使得你可以可视化操作曲线。
然后，这还只是个很初级的东西，希望大家支持，我会慢慢完善的。
此demo仅提供了单条贝塞尔曲线的操作，可控的点有四个，暂没有拖动线条的功能。
和那种用HTML5实现整个photoshop功能的项目比起来。这只能算是小小的练习，希望这个练习在不久的未来能够用上。

<!doctype html>
<html>
<head>
<meta charset='UTF-8' />
<title>贝塞尔曲线可视化操作</title>
<style>
*{padding:0;margin:0;}
body{padding:20px;}
</style>
</head>
<body>
<canvas id="pad" width='800' height='500'  style='position:relative;border:1px solid #ccc;'><a href='http://www.cssass.com'>cssass.com</a>提醒您：ie用户(9以下)请一边惭愧去吧</canvas>
<div id='output'>在屏幕中点击并可拖动，你可控的点有4个</div>
<button onclick='document.location.reload()'>刷新</button>
<script type="text/javascript">
var $id=function(n){
	return document.getElementById(n) || n;
}
$id("pad").addEventListener("mousedown", main, false);
var con=$id("pad").getContext('2d');
	con.strokeStyle = '#000';
	con.lineWidth=0.2;
var vector={sta:[],end:[],cr1:[],cr2:[]}
function main(){
	var e=arguments[0];
	var cx=e.layerX || e.offsetX,   //鼠标起点
		cy=e.layerY || e.offsetY;
		init(cx,cy);   //初始化点
	var sx=parseInt(vector.sta[0]), //起点
		sy=parseInt(vector.sta[1]),
		ex=parseInt(vector.end[0]), //终点
		ey=parseInt(vector.end[1]),
		cr1x=parseInt(vector.cr1[0]), //控制点1
		cr1y=parseInt(vector.cr1[1]),
		cr2x=parseInt(vector.cr2[0]), //控制点2
		cr2y=parseInt(vector.cr2[1]);
	if(vector.end[0] == undefined) return;  //仅有起点时，退出。
	if(cr1x-5 < cx && cx < cr1x + 5 && cr1y-5 < cy && cy < cr1y +5){    //选中控制点1
		 discern('ctr1',cx,cy,cr1x,cr1y,cr2x,cr2y);
	}
	else if(cr2x-5 < cx && cx < cr2x + 5 && cr2y-5 < cy && cy < cr2y +5){  //选中控制点2
		discern('ctr2',cx,cy,cr1x,cr1y,cr2x,cr2y);
	}
	else if(sx-5 < cx && cx < sx + 5 && sy-5 < cy && cy < sy +5){  //选中起点
	    discern('start',cx,cy,cr1x,cr1y,cr2x,cr2y);
	}
	else if(ex-5 < cx && cx < ex + 5 && ey-5 < cy && cy < ey +5 ){  //选中终点
		discern('end',cx,cy,cr1x,cr1y,cr2x,cr2y);
	}
	document.onmouseup=function(){
		document.onmousemove=null;
	}
}
function init(cx,cy){
	if(vector.sta[0] == undefined){  //若无起点时，初始化起点
		vector.sta[0] = vector.cr1[0] = cx;
		vector.sta[1] = vector.cr1[1] = cy;
		con.fillRect(vector.sta[0]-1, vector.sta[1]-1 ,3,3);
	}
	else if(vector.end[0] == undefined){  //若无终点，初始化终点
		vector.end[0] = vector.cr2[0] = cx;
		vector.end[1] = vector.cr2[1] = cy;
		con.fillRect(vector.end[0]-1, vector.end[1]-1 ,3,3);
		draw()  //已有两点，开始绘线
	}
}
function discern(v,cx,cy,cr1x,cr1y,cr2x,cr2y){
	document.onmousemove=function(e){
		var dx=e.layerX || e.offsetX,  //鼠标当前坐标
			dy=e.layerY || e.offsetY;
		switch(v) {
			case 'start' :  //拖动起点
				vector.sta[0]=dx;
				vector.sta[1]=dy;
				vector.cr1[0] = cr1x + (dx-cx);
				vector.cr1[1] = cr1y + (dy-cy);
				break;
			case 'end' :
				vector.end[0]=dx;
				vector.end[1]=dy;
				vector.cr2[0] = cr2x + (dx-cx);
				vector.cr2[1] = cr2y + (dy-cy);
				break;
			case 'ctr1' :
				vector.cr1[0] = dx;
				vector.cr1[1] = dy;
				break;
			case 'ctr2' :
				vector.cr2[0] = dx;
				vector.cr2[1] = dy;
				break;
			default: break;
		}
		draw();
	}
}
function draw(){
	 con.clearRect(0,0,800,500);
	 //画贝塞尔曲线
	 con.beginPath();
	 con.moveTo(vector.sta[0], vector.sta[1]);
	 con.bezierCurveTo(vector.cr1[0], vector.cr1[1], vector.cr2[0], vector.cr2[1], vector.end[0], vector.end[1]);
	 con.stroke();
	 //画控制线1
	con.beginPath();
	con.moveTo(vector.sta[0],vector.sta[1]);
	con.lineTo(vector.cr1[0], vector.cr1[1]);
	con.stroke();
	 //画控制线2
	con.beginPath();
	con.moveTo(vector.end[0], vector.end[1]);
	con.lineTo(vector.cr2[0], vector.cr2[1]);
	con.stroke();
	 //画4个控制点
	con.strokeRect(vector.sta[0]-1, vector.sta[1]-1 ,3,3);
	con.strokeRect(vector.end[0]-1, vector.end[1]-1 ,3,3);
	con.fillRect(vector.cr1[0]-1, vector.cr1[1]-1 ,3,3);
	con.fillRect(vector.cr2[0]-1, vector.cr2[1]-1 ,3,3);
	//输出贝塞尔函数
	$id('output').innerHTML='moveTo(' + vector.sta[0] +',' + vector.sta[1] + ');<br />' + 'bezierCurveTo(' + vector.cr1[0] +','+ vector.cr1[1] +',' + vector.cr2[0] +',' + vector.cr2[1] +','+ vector.end[0] +',' + vector.end[1] +');';
}
</script>
</body>
</html>

《百度UEO基于canvas绘制热力图的演示》
《浅析圆形物体的碰撞检测及应用》
《volume滑动块——html5中input type=’range’的模拟》
《《ie9大风车》与《忍者镖》》
《种花》

标签： bezierCurveTo, canvas, HTML5, 钢笔工具

这篇文章发布于 2010年09月16号，星期四，18:15，归类于 HTML5。您可以跟踪这篇文章的评论通过 RSS 2.0 feed。您可以留下评论，或者从您的站点trackback。

ONEBOYS 说：

2010年10月13日于17:32

已有插件支持从Illustrator中导出canvas code
http://visitmix.com/labs/ai2canvas/

上次ie9开发大赛做的小动画 - web前端 - 开发者问答说：

2013年05月20日于10:02

[...] 这个小玩意的难度在于，里面的所有东西都不是图片，而是用canvas写的，之前写的贝塞尔曲线的可视化操作实现倒是帮了小忙，不过之前有说AI已有插件直接导出canvas绘图代码了，那我的手写代码的生产力就太落后了。 [...]

wdydxf 说：

2013年08月5日于15:51

lz,目前还是只支持2个点吗,该文章有后续吗?

CSSASSCSSASS

贝塞尔曲线的可视化操作实现——Photoshop钢笔工具的初级模拟
作者：Neoxone 发表时间： 2010年09月16号，星期四阅读：8,573 次

相关文章:

3 条评论发表在“贝塞尔曲线的可视化操作实现——Photoshop钢笔工具的初级模拟”上

留下回复

贝塞尔曲线的可视化操作实现——Photoshop钢笔工具的初级模拟作者：Neoxone 发表时间： 2010年09月16号，星期四 阅读：8,573 次

相关文章:

3 条评论 发表在“贝塞尔曲线的可视化操作实现——Photoshop钢笔工具的初级模拟”上

留下回复

贝塞尔曲线的可视化操作实现——Photoshop钢笔工具的初级模拟
作者：Neoxone 发表时间： 2010年09月16号，星期四阅读：8,573 次

3 条评论发表在“贝塞尔曲线的可视化操作实现——Photoshop钢笔工具的初级模拟”上