scratchfoundation/scratch-paint
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-paint.git synced 2025-01-10 14:42:13 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Manually draw icons

Browse source
This commit is contained in:
DD Liu 2020-02-08 00:49:48 -05:00
parent 4fe7c0ab8b
commit 23ee224ab1
5 changed files with 59 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/helper/icons/costume-anchor.svg
View file

@ -1,16 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 58 (84663) - https://sketch.com -->
<title>Paint/Center Anchor/Active</title>
<desc>Created with Sketch.</desc>
<g id="Paint/Center-Anchor/Active" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.65" stroke-linecap="round">
<g id="anchor" transform="translate(8.000000, 8.000000)">
<circle id="Oval-4" stroke="#FFFFFF" stroke-width="9" cx="12" cy="12" r="9"></circle>
<path d="M12,0 L12,24" id="Line" stroke="#FFFFFF" stroke-width="9"></path>
<path d="M12,0 L12,24" id="Line" stroke="#FFFFFF" stroke-width="9" transform="translate(12.000000, 12.000000) rotate(-270.000000) translate(-12.000000, -12.000000) "></path>
<circle id="Oval-4" stroke="#000000" stroke-width="3" cx="12" cy="12" r="9"></circle>
<path d="M12,0 L12,24" id="Line" stroke="#000000" stroke-width="3"></path>
<path d="M12,0 L12,24" id="Line" stroke="#000000" stroke-width="3" transform="translate(12.000000, 12.000000) rotate(-270.000000) translate(-12.000000, -12.000000) "></path>
</g>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 1.3 KiB

12
src/helper/icons/selection-anchor-expanded.svg
View file

@ -1,12 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
<title>Paint/Center Anchor/Artwork Center Expanded</title>
<desc>Created with Sketch.</desc>
<g id="Paint/Center-Anchor/Artwork-Center-Expanded" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.65">
<g id="anchor" transform="translate(3.000000, 3.000000)" fill-rule="nonzero">
<path d="M7,0 C7.55228475,0 8,0.44771525 8,1 L8,1 L8,5.999 L13,6 C13.5128358,6 13.9355072,6.38604019 13.9932723,6.88337887 L14,7 C14,7.55228475 13.5522847,8 13,8 L13,8 L8,7.999 L8,13 C8,13.5128358 7.61395981,13.9355072 7.11662113,13.9932723 L7,14 C6.44771525,14 6,13.5522847 6,13 L6,13 L6,7.999 L1,8 C0.487164161,8 0.0644928393,7.61395981 0.00672773133,7.11662113 L1.77635684e-15,7 C1.77635684e-15,6.44771525 0.44771525,6 1,6 L1,6 L6,5.999 L6,1 C6,0.487164161 6.38604019,0.0644928393 6.88337887,0.00672773133 Z" id="White-Outline" fill="#FFFFFF"></path>
<path d="M7,0.5 C7.27614237,0.5 7.5,0.723857625 7.5,1 L7.5,1 L7.5,6.499 L13,6.5 C13.2454599,6.5 13.4496084,6.67687516 13.4919443,6.91012437 L13.5,7 C13.5,7.27614237 13.2761424,7.5 13,7.5 L13,7.5 L7.5,7.499 L7.5,13 C7.5,13.2454599 7.32312484,13.4496084 7.08987563,13.4919443 L7,13.5 C6.72385763,13.5 6.5,13.2761424 6.5,13 L6.5,13 L6.5,7.499 L1,7.5 C0.754540111,7.5 0.55039163,7.32312484 0.508055669,7.08987563 L0.5,7 C0.5,6.72385763 0.723857625,6.5 1,6.5 L1,6.5 L6.5,6.499 L6.5,1 C6.5,0.754540111 6.67687516,0.55039163 6.91012437,0.508055669 Z" id="Black-Outline" fill="#000000"></path>
</g>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 1.7 KiB

56
src/helper/layer.js
View file

@ -1,10 +1,9 @@
import paper from '@scratch/paper';
import log from '../log/log';
import {ART_BOARD_WIDTH, ART_BOARD_HEIGHT} from './view';
import {ART_BOARD_WIDTH, ART_BOARD_HEIGHT, CENTER} from './view';
import {isGroupItem} from './item';
import costumeAnchorIcon from './icons/costume-anchor.svg';
const CROSSHAIR_SIZE = 28;
const CROSSHAIR_SIZE = 16;
const _getLayer = function (layerString) {
for (const layer of paper.project.layers) {
@ -191,17 +190,46 @@ const _makeBackgroundPaper = function (width, height, color) {
// Helper function for drawing a crosshair
const _makeCrosshair = function (opacity, parent) {
paper.project.importSVG(costumeAnchorIcon, {
applyMatrix: false,
onLoad: function (item) {
item.position = new paper.Point(ART_BOARD_WIDTH / 2, ART_BOARD_HEIGHT / 2);
item.opacity = opacity;
item.parent = parent;
parent.dragCrosshair = item;
item.scale(CROSSHAIR_SIZE / item.bounds.width / paper.view.zoom);
setGuideItem(item);
}
});
const crosshair = new paper.Group();
const vLine2 = new paper.Path.Line(new paper.Point(0, -7), new paper.Point(0, 7));
vLine2.strokeWidth = 4;
vLine2.strokeColor = 'white';
vLine2.strokeCap = 'round';
crosshair.addChild(vLine2);
const hLine2 = new paper.Path.Line(new paper.Point(-7, 0), new paper.Point(7, 0));
hLine2.strokeWidth = 4;
hLine2.strokeColor = 'white';
hLine2.strokeCap = 'round';
crosshair.addChild(hLine2);
const circle2 = new paper.Shape.Circle(new paper.Point(0, 0), 5);
circle2.strokeWidth = 4;
circle2.strokeColor = 'white';
crosshair.addChild(circle2);
const vLine = new paper.Path.Line(new paper.Point(0, -7), new paper.Point(0, 7));
vLine.strokeWidth = 2;
vLine.strokeColor = '#ccc';
vLine.strokeCap = 'round';
crosshair.addChild(vLine);
const hLine = new paper.Path.Line(new paper.Point(-7, 0), new paper.Point(7, 0));
hLine.strokeWidth = 2;
hLine.strokeColor = '#ccc';
hLine.strokeCap = 'round';
crosshair.addChild(hLine);
const circle = new paper.Shape.Circle(new paper.Point(0, 0), 5);
circle.strokeWidth = 2;
circle.strokeColor = '#ccc';
crosshair.addChild(circle);
setGuideItem(crosshair);
crosshair.position = CENTER;
crosshair.opacity = opacity;
crosshair.parent = parent;
crosshair.applyMatrix = false;
parent.dragCrosshair = crosshair;
crosshair.scale(CROSSHAIR_SIZE / crosshair.bounds.width / paper.view.zoom);
};
const _makeDragCrosshairLayer = function () {

42
src/helper/selection-tools/bounding-box-tool.js
View file

@ -4,14 +4,13 @@ import keyMirror from 'keymirror';
import {getSelectedRootItems} from '../selection';
import {getGuideColor, removeBoundsPath, removeBoundsHandles} from '../guides';
import {getGuideLayer, setGuideItem} from '../layer';
import selectionAnchorIcon from '../icons/selection-anchor-expanded.svg';
import Cursors from '../../lib/cursors';
import ScaleTool from './scale-tool';
import RotateTool from './rotate-tool';
import MoveTool from './move-tool';
const SELECTION_ANCHOR_SIZE = 20;
const SELECTION_ANCHOR_SIZE = 12;
/** SVG for the rotation icon on the bounding box */
const ARROW_PATH = 'M19.28,1.09C19.28.28,19,0,18.2,0c-1.67,0-3.34,0-5,0-.34,0-.88.24-1,.47a1.4,1.4,' +
'0,0,0,.36,1.08,15.27,15.27,0,0,0,1.46,1.36A6.4,6.4,0,0,1,6.52,4,5.85,5.85,0,0,1,5.24,3,15.27,15.27,' +
@ -25,7 +24,6 @@ const BoundingBoxModes = keyMirror({
ROTATE: null,
MOVE: null
});
let anchorIcon;
/**
* Tool that handles transforming the selection and drawing a bounding box with handles.
@ -80,17 +78,6 @@ class BoundingBoxTool {
* @return {boolean} True if there was a hit, false otherwise
*/
onMouseDown (event, clone, multiselect, doubleClicked, hitOptions) {
if (!anchorIcon) {
paper.project.importSVG(selectionAnchorIcon, {
onLoad: function (item) {
anchorIcon = item;
item.visible = false;
item.parent = getGuideLayer();
setGuideItem(item);
}
});
}
if (event.event.button > 0) return; // only first mouse button
const {hitResult, mode} = this._determineMode(event, multiselect, hitOptions);
if (!hitResult) {
@ -225,10 +212,18 @@ class BoundingBoxTool {
this.boundsRect.curves[4].divideAtTime(0.5);
this.boundsRect.curves[6].divideAtTime(0.5);
this.boundsPath.addChild(this.boundsRect);
if (anchorIcon) {
this.boundsPath.addChild(anchorIcon);
this.boundsPath.selectionAnchor = anchorIcon;
}
let anchorIcon = new paper.Group();
const vRect = new paper.Rectangle(new paper.Point(-1, -6), new paper.Size(2, 12));
const vRoundRect = new paper.Path.Rectangle(vRect, new paper.Size(1, 1));
const hRect = new paper.Rectangle(new paper.Point(-6, -1), new paper.Size(12, 2));
const hRoundRect = new paper.Path.Rectangle(hRect, new paper.Size(1, 1));
anchorIcon = vRoundRect.unite(hRoundRect);
vRoundRect.remove();
hRoundRect.remove();
this.boundsPath.addChild(anchorIcon);
this.boundsPath.selectionAnchor = anchorIcon;
this._modeMap[BoundingBoxModes.MOVE].setBoundsPath(this.boundsPath);
}
this.boundsPath.guide = true;
@ -238,12 +233,8 @@ class BoundingBoxTool {
this.boundsPath.parent = getGuideLayer();
this.boundsPath.strokeWidth = 1 / paper.view.zoom;
this.boundsPath.strokeColor = getGuideColor();
if (anchorIcon) {
anchorIcon.visible = true;
anchorIcon.scale(SELECTION_ANCHOR_SIZE / paper.view.zoom / anchorIcon.bounds.width);
anchorIcon.position = rect.center;
}
this.boundsPath.selectionAnchor.scale(SELECTION_ANCHOR_SIZE / paper.view.zoom / this.boundsPath.selectionAnchor.bounds.width);
this.boundsPath.selectionAnchor.position = rect.center;
// Make a template to copy
const boundsScaleCircleShadow =
@ -324,9 +315,6 @@ class BoundingBoxTool {
this.boundsRect = null;
this.boundsScaleHandles.length = 0;
this.boundsRotHandles.length = 0;
if (anchorIcon) {
anchorIcon.visible = false;
}
}
removeBoundsHandles () {
removeBoundsHandles();

2
src/helper/view.js
View file

@ -10,6 +10,7 @@ const SVG_ART_BOARD_WIDTH = 480;
const SVG_ART_BOARD_HEIGHT = 360;
const ART_BOARD_WIDTH = 480 * 2;
const ART_BOARD_HEIGHT = 360 * 2;
const CENTER = new paper.Point(ART_BOARD_WIDTH / 2, ART_BOARD_HEIGHT / 2);
const PADDING_PERCENT = 25; // Padding as a percent of the max of width/height of the sprite
const MIN_RATIO = .125; // Zoom in to at least 1/8 of the screen. This way you don't end up incredibly
// zoomed in for tiny costumes.
@ -114,6 +115,7 @@ const zoomToFit = isBitmap => {
export {
ART_BOARD_HEIGHT,
ART_BOARD_WIDTH,
CENTER,
SVG_ART_BOARD_WIDTH,
SVG_ART_BOARD_HEIGHT,
clampViewBounds,