Skip to content

请问您这个飞线效果能不能做成带箭头的? #1

@huanledeniuduzi

Description

@huanledeniuduzi

请问您这个飞线效果加个箭头,要怎么加呢?谢谢!
function drawQ(f){
var p1,p2;
if(f.t1<1){
f.t1 += f.step;
f.t1 = Math.min(1,f.t1);
}
if(f.t1>=f.l){
f.t2 += f.step;
f.t2 = Math.min(1,f.t2);
}
p1 = getPointQuadRaticBeizer({x:0,y:0},f.ctl,{x:f.dis,y:0},f.t1);
p2 = getPointQuadRaticBeizer({x:0,y:0},f.ctl,{x:f.dis,y:0},f.t2);

	context.save();
	context.translate(f.s.x,f.s.y);
	context.rotate(f.r);
	var grd = context.createLinearGradient(p2.x, p2.y,p1.x, p1.y);
	grd.addColorStop(0,"rgba(255,255,255,0)");
	grd.addColorStop(1,f.c);
	grd.addColorStop(1,"rgba(255,255,255,0)");
	context.beginPath();
	
	context.strokeStyle = grd;
	context.lineWidth = f.size;
	context.moveTo(0,0);
	context.translate(f.ctl.x,f.ctl.y);
	context.rotate(45*Math.PI/180);
	context.quadraticCurveTo(f.ctl.x,f.ctl.y,f.dis,0);
	context.stroke();
	context.beginPath();
	context.fillStyle = f.c;
	context.arc(p1.x,p1.y,f.size/2,0,Math.PI*2);
	context.fill()
	context.restore();
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions