You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
41 lines
1.2 KiB
JavaScript
41 lines
1.2 KiB
JavaScript
'use strict';
|
|
|
|
const canvassed = require("canvassed");
|
|
|
|
module.exports = function createLine(options = {}) {
|
|
return canvassed.createObject(Object.assign({
|
|
type: "line",
|
|
sizeBustingProperties: ["x1", "y1", "x2", "y2", "width"],
|
|
cacheBustingProperties: ["color", "cap"],
|
|
requiredProperties: ["x1", "y1", "x2", "y2"],
|
|
color: "red",
|
|
width: 1,
|
|
cap: "butt",
|
|
onRecalculateSize: function onRecalculateSize() {
|
|
this.offsetX = Math.min(this.x1, this.x2);
|
|
this.offsetY = Math.min(this.y1, this.y2);
|
|
|
|
return {
|
|
width: Math.abs(this.x2 - this.x1) + this.width,
|
|
height: Math.abs(this.y2 - this.y1) + this.width,
|
|
underdrawX: this.width / 2,
|
|
underdrawY: this.width / 2,
|
|
overdrawX: this.width / 2,
|
|
overdrawY: this.width / 2
|
|
}
|
|
},
|
|
onRender: function onRender(context) {
|
|
let lineWidthOffset = this.width / 2;
|
|
|
|
context.strokeStyle = this.color;
|
|
context.lineWidth = this.width;
|
|
context.lineCap = this.cap;
|
|
|
|
context.beginPath();
|
|
context.moveTo(this.x1 - this.offsetX + this.renderUnderdrawX, this.y1 - this.offsetY + this.renderUnderdrawY);
|
|
context.lineTo(this.x2 - this.offsetX + this.renderUnderdrawX, this.y2 - this.offsetY + this.renderUnderdrawY);
|
|
context.stroke();
|
|
}
|
|
}, options));
|
|
}
|