Initial commit
commit
420a4d079a
@ -0,0 +1,2 @@
|
|||||||
|
/node_modules/
|
||||||
|
/lib/
|
@ -0,0 +1 @@
|
|||||||
|
/node_modules/
|
@ -0,0 +1,37 @@
|
|||||||
|
# packagename
|
||||||
|
|
||||||
|
packagedescription
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
[WTFPL](http://www.wtfpl.net/txt/copying/) or [CC0](https://creativecommons.org/publicdomain/zero/1.0/), whichever you prefer. A donation and/or attribution are appreciated, but not required.
|
||||||
|
|
||||||
|
## Donate
|
||||||
|
|
||||||
|
Maintaining open-source projects takes a lot of time, and the more donations I receive, the more time I can dedicate to open-source. If this module is useful to you, consider [making a donation](http://cryto.net/~joepie91/donate.html)!
|
||||||
|
|
||||||
|
You can donate using Bitcoin, PayPal, Flattr, cash-in-mail, SEPA transfers, and pretty much anything else. Thank you!
|
||||||
|
|
||||||
|
## Contributing
|
||||||
|
|
||||||
|
Pull requests welcome. Please make sure your modifications are in line with the overall code style, and ensure that you're editing the files in `src/`, not those in `lib/`.
|
||||||
|
|
||||||
|
Build tool of choice is `gulp`; simply run `gulp` while developing, and it will watch for changes.
|
||||||
|
|
||||||
|
Be aware that by making a pull request, you agree to release your modifications under the licenses stated above.
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
usagetext
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
usagecode
|
||||||
|
```
|
||||||
|
|
||||||
|
## API
|
||||||
|
|
||||||
|
### functionName(arg)
|
||||||
|
|
||||||
|
functiondescription
|
||||||
|
|
||||||
|
* __arg__: argumentdescription
|
@ -0,0 +1,18 @@
|
|||||||
|
var gulp = require("gulp");
|
||||||
|
var presetES2015 = require("@joepie91/gulp-preset-es2015");
|
||||||
|
|
||||||
|
var source = ["src/**/*.js"]
|
||||||
|
|
||||||
|
gulp.task('babel', function() {
|
||||||
|
return gulp.src(source)
|
||||||
|
.pipe(presetES2015({
|
||||||
|
basePath: __dirname
|
||||||
|
}))
|
||||||
|
.pipe(gulp.dest("lib/"));
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task("watch", function () {
|
||||||
|
gulp.watch(source, ["babel"]);
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task("default", ["babel", "watch"]);
|
@ -0,0 +1,3 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
module.exports = require("./lib");
|
@ -0,0 +1,27 @@
|
|||||||
|
{
|
||||||
|
"name": "canvassed-line",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "Line shape for `canvassed`",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
|
},
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "http://git.cryto.net/joepie91/canvassed-line.git"
|
||||||
|
},
|
||||||
|
"keywords": [
|
||||||
|
"canvassed",
|
||||||
|
"shape",
|
||||||
|
"line"
|
||||||
|
],
|
||||||
|
"author": "Sven Slootweg",
|
||||||
|
"license": "WTFPL",
|
||||||
|
"dependencies": {
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@joepie91/gulp-preset-es2015": "^1.0.1",
|
||||||
|
"babel-preset-es2015": "^6.6.0",
|
||||||
|
"gulp": "^3.9.1"
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,40 @@
|
|||||||
|
'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));
|
||||||
|
}
|
Loading…
Reference in New Issue