FlyLine icon indicating copy to clipboard operation
FlyLine copied to clipboard

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

Open huanledeniuduzi opened this issue 6 years ago • 0 comments

请问您这个飞线效果加个箭头,要怎么加呢?谢谢! 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();
}

huanledeniuduzi avatar May 24 '19 07:05 huanledeniuduzi