12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091 |
- import { SCanvasView, SColor } from "@saga-web/draw/lib";
- export class GraphView extends SCanvasView {
- constructor(id) {
- super(id);
- // 0 :line 1:area 2:img
- this._type = 0;
- // 线条颜色
- this._strokecolor = "";
- // 背景颜色
- this._bgcolor = "";
- //线条类型
- this._lineType = "";
- //线条粗细
- this._lineWidth = 1;
- /** 图片地址 */
- this._url = "";
- }
- get type() {
- return this._type;
- }
- set type(v) {
- this._type = v;
- this.update();
- }
- get strokecolor() {
- return this._strokecolor;
- }
- set strokecolor(v) {
- this._strokecolor = v;
- this.update();
- }
- get bgcolor() {
- return this._bgcolor;
- }
- set bgcolor(v) {
- this._bgcolor = v;
- this.update();
- }
- get lineType() {
- return this._lineType;
- }
- set lineType(v) {
- this._lineType = v;
- this.update();
- }
- get lineWidth() {
- return this._lineWidth;
- }
- set lineWidth(v) {
- this._lineWidth = v;
- this.update();
- }
- get url() {
- return this._url;
- }
- set url(v) {
- this._url = v;
- this.img = new Image();
- this.img.src = v;
- this.img.onload = () => {
- this.update();
- };
- this.img.onerror = (e) => {
- this.update();
- };
- }
- onDraw(canvas) {
- canvas.clearRect(0, 0, this.width, this.height);
- canvas.pen.lineWidth = this.lineWidth;
- if (this.lineType == 'dashed') {
- canvas.pen.lineDash = [10, 2];
- }
- if (this.lineType == 'dotted') {
- canvas.pen.lineDash = [this.lineWidth, this.lineWidth];
- }
- canvas.pen.color = new SColor(this.strokecolor);
- canvas.brush.color = new SColor(this.bgcolor);
- if (this.type == 0) {
- canvas.drawLine(80, 57, 120, 57);
- }
- else if (this.type == 1) {
- canvas.drawRect(50, 28, 100, 57);
- }
- else if (this.type == 2) {
- if (this.img) {
- console.log(this.img);
- canvas.drawImage(this.img, 86, 43, 28, 28);
- }
- }
- }
- }
|