KineticJS: для кривой Безье, которая расширяется, когда она течет - как добавить закругленные углы?

Question

Я использую KineticJS для рисования кривой Безье, которая расширяется по мере ее прохождения. Вот пример:

flat http://www.market-research-services.com/starpowermedia/for_distribution/bezier-curve-with-flat-end.png

Что бы некоторые возможные подходы для придания его закругленные углы в широком конце? Например:

rounded http://www.market-research-services.com/starpowermedia/for_distribution/bezier-curve-with-rounded-end.jpg

Большое спасибо заранее всем за любую информацию.

Для справки, вот код, который я сейчас использую:

//based on: http://stackoverflow.com/questions/8325680/how-to-draw-a-bezier-curve-with-variable-thickness-on-an-html-canvas     
//draw a bezier curve that gets larger as it flows 
function plotFlow(centerLeft, centerRight, thicknessLeft, thicknessRight, color, desiredWidth) { 
    var bezierLayer = mainLayer.getAttrs().bezierLayer; 
    var context = bezierLayer.getContext(); 
    var leftUpper = {x: centerLeft.x, y: centerLeft.y - thicknessLeft/2}; 
    var leftLower = {x: centerLeft.x, y: leftUpper.y + thicknessLeft}; 
    var rightUpper = {x: centerRight.x, y: centerRight.y - thicknessRight/2}; 
    var rightLower = {x: centerRight.x, y: rightUpper.y + thicknessRight}; 

    var center = (centerRight.x + centerLeft.x)/2; 
    var cp1Upper = {x: center, y: leftUpper.y}; 
    var cp2Upper = {x: center, y: rightUpper.y}; 
    var cp1Lower = {x: center, y: rightLower.y}; 
    var cp2Lower = {x: center, y: leftLower.y}; 

    var bezierCurve = new Kinetic.Shape({ 
     drawFunc: function(canvas) { 
      var context = canvas.getContext('2d'); 
      context.fillStyle = this.getFill(); 
      context.beginPath(); 
      context.moveTo(leftUpper.x, leftUpper.y); 
      context.bezierCurveTo(cp1Upper.x, cp1Upper.y, cp2Upper.x, cp2Upper.y, rightUpper.x, rightUpper.y); 
      context.lineTo(rightLower.x, rightLower.y); 
      context.bezierCurveTo(cp1Lower.x, cp1Lower.y, cp2Lower.x, cp2Lower.y, leftLower.x, leftLower.y); 
      context.lineTo(leftUpper.x, leftUpper.y); 
      context.fill(); 
      canvas.stroke(this); 

     }, 
     fill: color, 
     stroke: color, 
     strokeWidth: 2 
    }); 

    bezierCurve.setAttrs({'color': color, 'leftUpper': leftUpper, 'leftLower': leftLower, 'rightUpper': rightUpper, 'rightLower': rightLower, 'cp1Upper': cp1Upper, 'cp2Upper': cp2Upper, 'cp1Lower': cp1Lower, 'cp2Lower': cp2Lower}); 

    bezierLayer.add(bezierCurve); 
} 

Answer 1

Да.

1. Дано отрезок линии между rightUpper и rightLower (назовем UL).
2. Найти среднюю точку UL.
3. Найти склон UL.
4. Протяните линию перпендикулярно от середины UL.
5. Нарисуйте контекст.quadraticCurveTo от rightUpper to rightLower с контрольной точкой на перпендикулярной линии (Чем дальше на перпендикулярной линии, тем более заостренной кривой).
6. В качестве альтернативы вы можете нарисовать bezierCurveTo. Просто убедитесь, что 2 контрольные точки находятся на равном расстоянии от линии UL, чтобы избежать кривых.

Используя квадратные или безьевые кривые, обязательно держите контрольную точку (точки) очень близко к UL. Чем дальше, тем больше вы получите полную кривую в конце, а не закругленные углы.