Expand filled holes by 1 px to avoid a gap between fill and outline

This commit is contained in:
DD 2017-11-06 16:57:53 -05:00
parent 207341f47f
commit 045dcf211c
2 changed files with 15 additions and 0 deletions

View file

@ -49,8 +49,18 @@ const sortItemsByZIndex = function (a, b) {
return null;
};
// Expand the size of the path by approx one pixel all around
const expandByOne = function (path) {
const center = path.position;
for (const seg of path.segments) {
const norm = seg.point.subtract(center).normalize();
seg.point = seg.point.add(norm);
}
};
export {
checkPointsClose,
expandByOne,
getRandomInt,
getRandomBoolean,
snapDeltaToAngle,

View file

@ -1,5 +1,6 @@
import paper from '@scratch/paper';
import {getHoveredItem} from '../hover';
import {expandByOne} from '../math';
class FillTool extends paper.Tool {
static get TOLERANCE () {
@ -86,6 +87,8 @@ class FillTool extends paper.Tool {
this.fillItem = item;
if (item.parent instanceof paper.CompoundPath && item.area < 0) { // hole
this.addedFillItem = item.clone();
// This usually fixes it so there isn't a teeny tiny gap in between the fill and the outline
expandByOne(this.addedFillItem);
this.addedFillItem.insertAbove(item.parent);
} else if (this.fillItem.parent instanceof paper.CompoundPath) {
this.fillItemOrigColor = item.parent.fillColor;
@ -100,6 +103,8 @@ class FillTool extends paper.Tool {
if (this.fillItem) {
// if the hole we're filling in is the same color as the parent, remove the hole
if (this.addedFillItem &&
this.addedFillItem.fillColor !== null &&
this.addedFillItem.fillColor.type !== 'gradient' &&
this.fillItem.parent.fillColor.toCSS() === this.addedFillItem.fillColor.toCSS()) {
this.addedFillItem.remove();
this.fillItem.remove();