mirror of
https://github.com/unanmed/HumanBreak.git
synced 2025-01-31 15:09:26 +08:00
style: graphics.ts
This commit is contained in:
parent
4e583fb121
commit
26600c2154
@ -75,10 +75,12 @@ export abstract class GraphicItemBase
|
|||||||
setLineOption(options: Partial<ILineProperty>) {
|
setLineOption(options: Partial<ILineProperty>) {
|
||||||
if (!isNil(options.lineWidth)) this.lineWidth = options.lineWidth;
|
if (!isNil(options.lineWidth)) this.lineWidth = options.lineWidth;
|
||||||
if (!isNil(options.lineDash)) this.lineDash = options.lineDash;
|
if (!isNil(options.lineDash)) this.lineDash = options.lineDash;
|
||||||
if (!isNil(options.lineDashOffset)) this.lineDashOffset = options.lineDashOffset;
|
if (!isNil(options.lineDashOffset))
|
||||||
|
this.lineDashOffset = options.lineDashOffset;
|
||||||
if (!isNil(options.lineJoin)) this.lineJoin = options.lineJoin;
|
if (!isNil(options.lineJoin)) this.lineJoin = options.lineJoin;
|
||||||
if (!isNil(options.lineCap)) this.lineCap = options.lineCap;
|
if (!isNil(options.lineCap)) this.lineCap = options.lineCap;
|
||||||
if (!isNil(options.miterLimit)) this.miterLimit = options.miterLimit;
|
if (!isNil(options.miterLimit)) this.miterLimit = options.miterLimit;
|
||||||
|
this.update();
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -126,7 +128,7 @@ export abstract class GraphicItemBase
|
|||||||
ctx.fillStyle = this.fill;
|
ctx.fillStyle = this.fill;
|
||||||
ctx.strokeStyle = this.stroke;
|
ctx.strokeStyle = this.stroke;
|
||||||
ctx.lineWidth = this.lineWidth;
|
ctx.lineWidth = this.lineWidth;
|
||||||
ctx.setLineDash(this.lineDash)
|
ctx.setLineDash(this.lineDash);
|
||||||
ctx.lineDashOffset = this.lineDashOffset;
|
ctx.lineDashOffset = this.lineDashOffset;
|
||||||
ctx.lineJoin = this.lineJoin;
|
ctx.lineJoin = this.lineJoin;
|
||||||
ctx.lineCap = this.lineCap;
|
ctx.lineCap = this.lineCap;
|
||||||
@ -268,7 +270,15 @@ export class Ellipse extends GraphicItemBase {
|
|||||||
const ctx = canvas.ctx;
|
const ctx = canvas.ctx;
|
||||||
this.setCanvasState(canvas);
|
this.setCanvasState(canvas);
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
ctx.ellipse(this.x,this.y,this.radiusX,this.radiusY,0,this.start,this.end);
|
ctx.ellipse(
|
||||||
|
this.x,
|
||||||
|
this.y,
|
||||||
|
this.radiusX,
|
||||||
|
this.radiusY,
|
||||||
|
0,
|
||||||
|
this.start,
|
||||||
|
this.end
|
||||||
|
);
|
||||||
|
|
||||||
switch (this.mode) {
|
switch (this.mode) {
|
||||||
case GraphicMode.Fill:
|
case GraphicMode.Fill:
|
||||||
@ -299,7 +309,6 @@ export class Ellipse extends GraphicItemBase {
|
|||||||
this.update();
|
this.update();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 设置椭圆的起始与终止角度
|
* 设置椭圆的起始与终止角度
|
||||||
* @param start 起始角度
|
* @param start 起始角度
|
||||||
@ -353,10 +362,9 @@ export class Line extends GraphicItemBase {
|
|||||||
const ctx = canvas.ctx;
|
const ctx = canvas.ctx;
|
||||||
this.setCanvasState(canvas);
|
this.setCanvasState(canvas);
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
ctx.moveTo(this.x1,this.y1)
|
ctx.moveTo(this.x1, this.y1);
|
||||||
ctx.lineTo(this.x2, this.y2);
|
ctx.lineTo(this.x2, this.y2);
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -423,8 +431,15 @@ export class BezierCurve extends GraphicItemBase {
|
|||||||
const ctx = canvas.ctx;
|
const ctx = canvas.ctx;
|
||||||
this.setCanvasState(canvas);
|
this.setCanvasState(canvas);
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
ctx.moveTo(this.sx,this.sy)
|
ctx.moveTo(this.sx, this.sy);
|
||||||
ctx.bezierCurveTo(this.cp1x,this.cp1y,this.cp2x,this.cp2y,this.ex,this.ey);
|
ctx.bezierCurveTo(
|
||||||
|
this.cp1x,
|
||||||
|
this.cp1y,
|
||||||
|
this.cp2x,
|
||||||
|
this.cp2y,
|
||||||
|
this.ex,
|
||||||
|
this.ey
|
||||||
|
);
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -524,7 +539,7 @@ export class QuadraticCurve extends GraphicItemBase {
|
|||||||
const ctx = canvas.ctx;
|
const ctx = canvas.ctx;
|
||||||
this.setCanvasState(canvas);
|
this.setCanvasState(canvas);
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
ctx.moveTo(this.sx,this.sy)
|
ctx.moveTo(this.sx, this.sy);
|
||||||
ctx.quadraticCurveTo(this.cpx, this.cpy, this.ex, this.ey);
|
ctx.quadraticCurveTo(this.cpx, this.cpy, this.ex, this.ey);
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user