render holes with texture

This commit is contained in:
casperlamboo 2017-11-19 13:02:18 +01:00
parent a60f1970d5
commit a41806a7be
2 changed files with 11 additions and 1 deletions

BIN
img/holepatern.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

View File

@ -5,6 +5,13 @@ import { LINE_WIDTH } from '../constants/d2Constants.js';
import { hexToStyle } from '../utils/colorUtils.js'; import { hexToStyle } from '../utils/colorUtils.js';
import { DESELECT_TRANSPARENCY, FILL_TRANSPARENCY, LINE_TRANSPARENCY } from '../constants/d2Constants.js'; import { DESELECT_TRANSPARENCY, FILL_TRANSPARENCY, LINE_TRANSPARENCY } from '../constants/d2Constants.js';
import { PIXEL_RATIO } from '../constants/general.js'; import { PIXEL_RATIO } from '../constants/general.js';
import holePaternUrl from '../../img/holepatern.png';
import { loadImage } from '../utils/imageUtils.js';
let holePatern;
loadImage(holePaternUrl).then(image => {
holePatern = document.createElement('canvas').getContext('2d').createPattern(image, 'repeat')
});
export default class Shape extends Matrix { export default class Shape extends Matrix {
constructor(shapeData) { constructor(shapeData) {
@ -94,7 +101,10 @@ export default class Shape extends Matrix {
const lineWidth = PIXEL_RATIO * LINE_WIDTH; const lineWidth = PIXEL_RATIO * LINE_WIDTH;
context.globalAlpha = this.alpha; context.globalAlpha = this.alpha;
if (this._shapeData.fill) { if (!this._shapeData.solid) {
context.fillStyle = holePatern;
context.fill();
} else if (this._shapeData.fill) {
context.fillStyle = this.color; context.fillStyle = this.color;
context.fill(); context.fill();