Staffelei Dreieck mit abgerundeten Ecken?

Question

Wie kann ich in EaselJS ein Dreieck mit abgerundeten Ecken erstellen? Ich verwende drawPolyStar das Dreieck zu schaffen,

var polystar = new createjs.Shape(); 
polystar.graphics.drawPolyStar(100, 100, 60, 3, 0, -90); 

Dies ist ein Bild von dem, was ich will das Dreieck aussehen:

EDIT: Bild Link scheint nicht zu funktionieren. So sollte das Dreieck aussehen:

Aber das eigentliche Dreieck hat scharfe Ecken.

Answer 1

Es gibt keine Canvas-APIs zum Abrunden von Ecken von Polygonen, die wie die roundRect-API funktionieren.

Es gibt ein paar Ansätze, die ich mir vorstellen kann:

1. Sie die runden Ecken sich ARCTO verwenden. Dies würde einige mathematische Berechnungen erfordern, und es könnte sogar einige Bibliotheken oder Beispiele geben.

[EDIT] Ich verbrachte ein wenig Zeit Grimassen Probe https://jsfiddle.net/lannymcnie/cga60tsf/1/

2. abgerundeten Kanten Hub verwenden, können Sie sortieren sie von Fälschung. This fiddle zeigt, wie eine dicke Linie mit runden Enden die äußeren Kanten rund aussehen lässt. Sie könnten ein weiteres kleineres Dreieck auf die Oberseite zeichnen, um den gewünschten Effekt zu erzielen.

Probe

// Line outer radius 
context.lineJoin = "round"; 
context.lineWidth = cornerRadius;