canvas常用方法

简介: 牙叔教程 简单易懂

牙叔教程 简单易懂


画笔常用方法

let paint=new Paint();
paint.setColor(Color.GRAY);
paint.setStyle(Paint.Style.STROKE);
paint.setStyle(Paint.Style.FILL);
paint.setStrokeWidth(20);
paint.setTextSize(10);
paint.setTextAlign(Paint.Align.CENTER);
paint.setXfermode(null);
// 方法 指定参数类型
p["setShadowLayer(float,float,float,int)"](100, 0, 0, new java.lang.Long(Color.RED));
p["setShadowLayer(float,float,float,int)"](100, 0, 0, $colors.RED);
// 构造函数 指定参数类型
let radialGradient = new RadialGradient["(float,float,float,int[],float[],android.graphics.Shader$TileMode)"](
  centerX,
  centerY,
  radius,
  radialColors,
  positionList,
  Shader.TileMode.REPEAT
);


文字宽高

fontMetrics = paint.getFontMetrics();
let contentHeight = fontMetrics.bottom - fontMetrics.top;
let textBound = new android.graphics.Rect();
let content = "公众号: 牙叔教程";
textPaint.getTextBounds(content, 0, content.length, textBound);
log(textBound.height());
let rect = new android.graphics.Rect();
paint.getTextBounds("1", 0, 1, rect);
textHeight = rect.height();


圆角矩形path

// 添加统一圆角的圆角矩形,
// rect:矩形区域,
// rx:椭圆圆角的横轴半径,
// ry:椭圆圆角的纵轴半径,
// dir:线的闭合方向(CW顺时针方向 | CCW逆时针方向)
mPath.addRoundRect(
  new RectF(0, 0, mRectF.right - 0, mRectF.bottom - 0),
  rx,
  y,
  Path.Direction.CW
);


圆形path

let path = new Path();
// float x:圆心X轴坐标
// float y:圆心Y轴坐标
// float radius:圆半径
// Path.Direction有两个值:
// Path.Direction.CCW:是counter-clockwise缩写,指创建逆时针方向的矩形路径;
// Path.Direction.CW:是clockwise的缩写,指创建顺时针方向的矩形路径;
path.addCircle(x, y, radius, dir);


直线path

let path = new Path();
path.moveTo(x0, y0);
path.lineTo(x1, y1);
path.lineTo(x2, y2);
path.close();


清空画板

canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
canvas.drawColor(android.graphics.Color.TRANSPARENT, android.graphics.PorterDuff.Mode.CLEAR);


画红色

canvas.drawColor(Color.RED);


画圆

// x, y, radius
// public void drawCircle (float cx, float cy, float radius, Paint paint)
canvas.drawCircle(500,500,500, paint);


画字

// drawText(String text, float x, float y, Paint paint)
canvas.drawText('公众号: 牙叔教程', x, y, paint);


移动坐标原点

canvas.translate(x, y);


画线

canvas.drawLine(x1, y1, x2, y2, paint);


裁剪path

let path = new Path();
path.addRect(rect, Path.Direction.CW);
canvas.clipPath(path);


ValueAnimator

var valueAnimator = android.animation.ValueAnimator.ofFloat(circle.y - radius - 66, circle.y + radius + 66);
valueAnimator.setDuration(4000);
valueAnimator.addUpdateListener(
  new android.animation.ValueAnimator.AnimatorUpdateListener({
    onAnimationUpdate: function (valueAnimator) {
      line.y = valueAnimator.getAnimatedValue();
    },
  })
);
valueAnimator.setRepeatCount(android.animation.ValueAnimator.INFINITE);
valueAnimator.start();


名人名言


思路是最重要的, 其他的百度, bing, stackoverflow, github, 安卓文档, autojs文档, 最后才是群里问问
--- 牙叔教程


声明


部分内容来自网络
本教程仅用于学习, 禁止用于其他用途

相关文章
|
20天前
|
XML 编解码 前端开发
svg和canvas的区别
【10月更文挑战第24天】SVG和Canvas各有优缺点,在实际应用中需要根据具体的需求和场景来选择合适的技术来实现图形绘制和交互效果。
33 1
|
1月前
|
XML 存储 前端开发
canvas与svg的区别
canvas与svg的区别
22 4
|
1月前
|
XML 前端开发 JavaScript
Canvas 和 SVG 的区别
Canvas 和 SVG 的区别
33 0
|
1月前
|
XML 移动开发 前端开发
Canvas和SVG的区别
Canvas和SVG的区别
70 0
|
3月前
|
移动开发 前端开发 JavaScript
|
6月前
|
XML 存储 前端开发
canvas和svg的区别
canvas和svg的区别
|
6月前
|
XML 前端开发 JavaScript
canvas和svg有什么区别
canvas和svg的区别
|
XML 前端开发 JavaScript
canvas 和 svg 的区别是什么
canvas 和 svg 的区别是什么
81 0
|
6月前
|
前端开发 算法 计算机视觉
用canvas消除锯齿的方式
用canvas消除锯齿的方式
255 0