html钢笔特效,JS仿Photoshop钢笔工具(贝塞尔曲线可视化操作)效果

JS仿Photoshop钢笔工具(贝塞尔曲线可视化操作)效果_网页代码站(www.webdm.cn)

*{padding:0;margin:0;}

body{padding:20px;}

提醒：ie用户(9以下)请绕行！

在屏幕中点击并可拖动，你可控的点有4个

刷新

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.οnmοuseup=function(){

document.οnmοusemοve=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.οnmοusemοve=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] + ');
' + 'bezierCurveTo(' + vector.cr1[0] +','+ vector.cr1[1] +',' + vector.cr2[0] +',' + vector.cr2[1] +','+ vector.end[0] +',' + vector.end[1] +');';

}

网页代码站 - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！