Je sais qu'il n'y a pas de soutien autochtone pour faire des lignes de trait en pointillées rendues sur une toile, mais j'ai vu les façons intelligentes que les gens ont pu générer un soutien à cela.
Ce que je me demande, c'est s'il y a un moyen de traduire cela pour permettre des coups en pointillé autour des formes (spécifiquement des cercles)?
5 Réponses :
Si tout échoue, vous pouvez toujours boucler une variable de 0 à 2 * Voilà y aller, cercle en pointillé fait maison :) PI , sauter chaque étape éléments et dessin sur tous les autres étape Articles Points sur Sin (Angle) * RADIUS + CENDENTX, COS (Angle) * RADIUS + CENTERY .
Démo en direct strong> calcPointSpirt code> prend 4 Arguments, le centre X / Y, le rayon et la longueur des tirets. Il renvoie une gamme de points, x, y, ex, ey. Vous pouvez simplement boucler les points pour dessiner le cercle en pointillé. Il y a probablement beaucoup plus de façons élégantes de le faire, mais je l'ai imaginé, donnez-lui un coup. P> function calcPointsCirc( cx,cy, rad, dashLength)
{
var n = rad/dashLength,
alpha = Math.PI * 2 / n,
pointObj = {},
points = [],
i = -1;
while( i < n )
{
var theta = alpha * i,
theta2 = alpha * (i+1);
points.push({x : (Math.cos(theta) * rad) + cx, y : (Math.sin(theta) * rad) + cy, ex : (Math.cos(theta2) * rad) + cx, ey : (Math.sin(theta2) * rad) + cy});
i+=2;
}
return points;
}
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d');
canvas.width = canvas.height= 200;
var pointArray= calcPointsCirc(50,50,50, 1);
ctx.strokeStyle = "rgb(255,0,0)";
ctx.beginPath();
for(p = 0; p < pointArray.length; p++){
ctx.moveTo(pointArray[p].x, pointArray[p].y);
ctx.lineTo(pointArray[p].ex, pointArray[p].ey);
ctx.stroke();
}
ctx.closePath();
Merci pour l'extrait et la démo. Jsfiddle est assez agréable!
Il y a un problème que je voudrais vous demander de m'aider à réparer. Voir jsfiddle.net/yps23u - Seule le changement que j'ai fait est la couleur. Cela fonctionne étrange avec RGBA. S'il vous plaît conseil. Merci!
mon bibliothèque de chemins de chemin JavaScript implémente le dessin pointillé des chemins arbitraires (qui peut être composé de n'importe quel nombre de segments droits ou courbes), y compris des ellipses. Téléchargez-le et vérifiez les exemples.
Je cherchais un cercle en pointillé pour mon jeu et après avoir lu toutes les pages, j'ai écrit une classe dans Thypscript, cela fonctionne très bien. Si quelqu'un recherche le cercle en pointillé dans TypeScript, il est ici;
export class DashedCircle
{
centerX: number;
centerY: number;
radius: number;
color: string;
dashSize: number;
ctx: CanvasRenderingContext2D;
constructor(ctx:CanvasRenderingContext2D, centerX: number, centerY: number, radius: number, color: string, dashSize: number)
{
this.ctx = ctx;
this.centerX = centerX;
this.centerY = centerY;
this.radius = radius;
this.color = color;
this.dashSize = dashSize;
}
CalculateCirclePoints()
{
var n = this.radius / this.dashSize;
var alpha = Math.PI * 2 / n;
var pointObj = {};
var points = [];
var i = -1;
while (i < n)
{
var theta = alpha * i;
var theta2 = alpha * (i + 1);
points.push({
x: (Math.cos(theta) * this.radius) + this.centerX,
y: (Math.sin(theta) * this.radius) + this.centerY,
ex: (Math.cos(theta2) * this.radius) + this.centerX,
ey: (Math.sin(theta2) * this.radius) + this.centerY });
i += 2;
}
return points;
}
Draw()
{
var points = this.CalculateCirclePoints();
this.ctx.strokeStyle = this.color;
this.ctx.beginPath();
for (var p = 0; p < points.length; p++)
{
this.ctx.moveTo(points[p].x, points[p].y);
this.ctx.lineTo(points[p].ex, points[p].ey);
this.ctx.stroke();
}
this.ctx.closePath();
}
}
Le moyen le plus simple en utilisant context.setlineDash () a > ctx.beginPath();
ctx.setLineDash([5, 5]);
ctx.beginPath();
ctx.arc(100, 60, 50, 0, Math.PI * 2);
ctx.closePath();
ctx.stroke();
C'est la bonne réponse! Toutes les autres réponses sont des solutions de contournement!
Cela devrait être la réponse et il y a beaucoup de travaux autour et pour réinitialiser le SetlineDash (). utiliser ctx.setlinedash ([]);