différences entre l'arc de toile html5 et l'arc de toile Android:
en html5/javascript vous donnez centerX, centerY, radius comme les 3 premiers arguments. Dans Android, vous donnez le rectangle entourant le cercle au lieu de ceux 3. C'est un peu plus lourd pour les cercles, mais est plus souple, comme vous pouvez le faire aussi ovales (ellipse)
en javascript, vous donnez début angle, angle de fin, et booléen pour antihoraire comme arguments 4,5,6. Dans Android, vous donnez plutôt l'angle de départ et "l'angle de balayage". L'angle de balayage est la différence entre l'angle d'extrémité et l'angle de départ. Si vous voulez dans le sens antihoraire, donnez simplement un angle de balayage négatif. Javascript angles sont en radians, et dans android ils sont en degrés.
A titre d'illustration, voici quelques exemples de code qui dessine un C - figure en forme composé d'un arc long sur la gauche, et 3 courts arcs sur la droite, dont l'un dans le sens antihoraire.
JavaScript:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<title>arcs</title>
<script type="text/javascript">
function initPage(){
ctx = document.getElementById("canvas").getContext('2d');
ctx.fillStyle = "blue";
pi = Math.PI;
r = 100;
R = 3 * r;
padding = 5;
width = 2 * (R + padding);
height = width;
centerX = padding + width/2;
centerY = padding + height/2;
ctx.beginPath();
ctx.arc(centerX, centerY, R, pi/2, 3*pi/2, false);
ctx.arc(centerX, centerY - 2*r, r, 3*pi/2, pi/2, false);
ctx.arc(centerX, centerY, r, 3*pi/2, pi/2, true);
ctx.arc(centerX, centerY + 2*r, r, 3*pi/2, pi/2, false);
ctx.fill();
}
</script>
</head>
<body onload="initPage();">
<canvas id="canvas" width="610" height="610"></canvas>
</body>
</html>
android:
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.widget.ImageView;
public class MainActivity extends Activity {
private void drawToImageView(ImageView iv){
Paint paint = new Paint();
paint.setStyle(Paint.Style.FILL);
paint.setColor(Color.BLUE);
Path path = new Path();
int radius = 140;
int Radius = 3 * radius;
int padding = 5;
int width = 2 * (Radius + padding);
int height = width;
Bitmap bm = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bm);
float a = 90f;
float b = 3*a;
float pi = 2*a;
float _radius = (float)radius;
float _Radius = (float)Radius;
float centerX = padding + width/2;
float centerY = padding + height/2;
path.addArc(circRect(centerX, centerY, _Radius), a, pi);
path.addArc(circRect(centerX, centerY - 2*_radius, _radius), b, pi);
path.addArc(circRect(centerX, centerY, _radius), b, -pi);
path.addArc(circRect(centerX, centerY + 2*_radius, _radius), b, pi);
canvas.drawPath(path, paint);
iv.setImageDrawable(new BitmapDrawable(getResources(), bm));
}
private RectF circRect(float centerX, float centerY, float radius){
float left = centerX - radius;
float right = centerX + radius;
float top = centerY - radius;
float bottom = centerY + radius;
return new RectF(left, top, right, bottom);
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
ImageView iv = (ImageView)findViewById(R.id.myImageView);
drawToImageView(iv);
}
}
il n'y a aucune notion de droite et contre une montre en toile android parce que le signe de l'angle de balayage définit si elle est dans le sens horaire ou anti-horaire. – njzk2
@ njzk2 Je suis conscient de cela, mais HTML5 le fait. –