mirror
/
turtlestitch
kopia lustrzana https://github.com/backface/turtlestitch
1
0
Forkuj 0
Kod Zgłoszenia Projekty Wydania Wiki Aktywność

Merge pull request #2641 from jadga-h/master 

modified scale buttons in paint editor
pull/95/head
Jens Mönig 2020-07-13 17:16:01 +02:00 zatwierdzone przez GitHub
rodzic 0fcecbccc8 70c93bb9e2
commit fda21473e9
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 4AEE18F83AFDEB23
2 zmienionych plików z 174 dodań i 20 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

45
src/paint.js
Wyświetl plik

@ -1,4 +1,4 @@
/*
/*
paint.js
a paint editor for Snap!
@ -71,17 +71,18 @@
2020 Apr 14 - Morphic2 migration (Jens)
2020 May 17 - Pipette alpha fix (Joan)
2020 July 13 - modified scale buttons (Jadga)
*/
/*global Point, Rectangle, DialogBoxMorph, AlignmentMorph, PushButtonMorph,
Color, SymbolMorph, newCanvas, Morph, TextMorph, Costume, SpriteMorph, nop,
Color, SymbolMorph, newCanvas, Morph, StringMorph, Costume, SpriteMorph, nop,
localize, InputFieldMorph, SliderMorph, ToggleMorph, ToggleButtonMorph,
BoxMorph, modules, radians, MorphicPreferences, getDocumentPositionOf,
StageMorph, isNil, SVG_Costume*/
// Global stuff ////////////////////////////////////////////////////////
modules.paint = '2020-May-17';
modules.paint = '2020-July-13';
// Declarations
@ -127,7 +128,7 @@ PaintEditorMorph.prototype.buildContents = function () {
this.addBody(new AlignmentMorph('row', this.padding));
this.controls = new AlignmentMorph('column', this.padding / 2);
this.controls.alignment = 'left';
this.controls.alignment = 'center';
this.edits = new AlignmentMorph('row', this.padding / 2);
this.buildEdits();
@ -258,20 +259,24 @@ PaintEditorMorph.prototype.buildEdits = function () {
PaintEditorMorph.prototype.buildScaleBox = function () {
var paper = this.paper;
this.scaleBox.add(this.pushButton(
"grow",
function () {paper.scale(0.05, 0.05); }
new SymbolMorph('grow', 18),
function () {paper.scale(0.05, 0.05); },
'grow'
));
this.scaleBox.add(this.pushButton(
"shrink",
function () {paper.scale(-0.05, -0.05); }
new SymbolMorph('shrink', 18),
function () {paper.scale(-0.05, -0.05); },
'shrink'
));
this.scaleBox.add(this.pushButton(
"flip ↔",
function () {paper.scale(-2, 0); }
new SymbolMorph('flipHorizontal', 18),
function () {paper.scale(-2, 0); },
'flip horizontal'
));
this.scaleBox.add(this.pushButton(
"flip ↕",
function () {paper.scale(0, -2); }
new SymbolMorph('flipVertical', 18),
function () {paper.scale(0, -2); },
'flip vertical'
));
this.scaleBox.fixLayout();
};
@ -366,7 +371,10 @@ PaintEditorMorph.prototype.populatePropertiesMenu = function () {
var c = this.controls,
myself = this,
pc = this.propertiesControls,
alpen = new AlignmentMorph("row", this.padding);
alpen = new AlignmentMorph("row", this.padding),
brushControl = new AlignmentMorph("column");
brushControl.alignment = "left";
pc.primaryColorViewer = new Morph();
pc.primaryColorViewer.isCachingImage = true;
@ -399,7 +407,7 @@ PaintEditorMorph.prototype.populatePropertiesMenu = function () {
ctx.stroke();
};
pc.primaryColorViewer.setExtent(new Point(180, 50));
pc.primaryColorViewer.setExtent(new Point(180, 40));
pc.primaryColorViewer.color = new Color(0, 0, 0);
pc.colorpicker = new PaintColorPickerMorph(
@ -450,12 +458,17 @@ PaintEditorMorph.prototype.populatePropertiesMenu = function () {
"Constrain proportions of shapes?\n(you can also hold shift)",
function () {return myself.shift; }
);
pc.constrain.label.isBold = false;
c.add(pc.colorpicker);
//c.add(pc.primaryColorButton);
c.add(pc.primaryColorViewer);
c.add(new TextMorph(localize("Brush size")));
c.add(alpen);
brushControl.add(
new StringMorph(localize("Brush size") + ":", 10, null, true)
);
brushControl.add(alpen);
brushControl.fixLayout();
c.add(brushControl);
c.add(pc.constrain);
};

149
src/symbols.js
Wyświetl plik

@ -41,7 +41,7 @@
// Global stuff ////////////////////////////////////////////////////////
modules.symbols = '2020-July-01';
modules.symbols = '2020-July-13';
var SymbolMorph;
@ -73,7 +73,9 @@ SymbolMorph.prototype.names = [
'gearBig',
'file',
'fullScreen',
'grow',
'normalScreen',
'shrink',
'smallStage',
'normalStage',
'turtle',
@ -138,7 +140,9 @@ SymbolMorph.prototype.names = [
'keyboardFilled',
'globe',
'globeBig',
'list'
'list',
'flipVertical',
'flipHorizontal'
];
// SymbolMorph instance creation:
@ -250,6 +254,9 @@ SymbolMorph.prototype.renderShape = function (ctx, aColor) {
case 'fullScreen':
this.renderSymbolFullScreen(ctx, aColor);
break;
case 'grow':
this.renderSymbolGrow(ctx, aColor);
break;
case 'normalScreen':
this.renderSymbolNormalScreen(ctx, aColor);
break;
@ -259,6 +266,9 @@ SymbolMorph.prototype.renderShape = function (ctx, aColor) {
case 'normalStage':
this.renderSymbolNormalStage(ctx, aColor);
break;
case 'shrink':
this.renderSymbolShrink(ctx, aColor);
break;
case 'turtle':
this.renderSymbolTurtle(ctx, aColor);
break;
@ -448,6 +458,12 @@ SymbolMorph.prototype.renderShape = function (ctx, aColor) {
case 'list':
this.renderSymbolList(ctx, aColor);
break;
case 'flipVertical':
this.renderSymbolFlipVertical(ctx, aColor);
break;
case 'flipHorizontal':
this.renderSymbolFlipHorizontal(ctx, aColor);
break;
default:
throw new Error('unknown symbol name: "' + this.name + '"');
}
@ -696,9 +712,56 @@ SymbolMorph.prototype.renderSymbolFullScreen = function (ctx, color) {
ctx.fill();
};
SymbolMorph.prototype.renderSymbolNormalScreen = function (ctx, color) {
// draw two arrows pointing diagonally inwards
SymbolMorph.prototype.renderSymbolGrow = function (ctx, color) {
var h = this.size,
width = this.symbolWidth(),
c = width / 2,
off = width / 20,
w = width / 3;
function arrows() {
ctx.strokeStyle = color.toString();
ctx.lineWidth = width / 7;
ctx.beginPath();
ctx.moveTo(c - off * 3, c + off * 3);
ctx.lineTo(off * 2, h - off * 2);
ctx.stroke();
ctx.strokeStyle = color.toString();
ctx.lineWidth = width / 7;
ctx.beginPath();
ctx.moveTo(c + off * 3 , c - off * 3);
ctx.lineTo(h - off * 2, off * 2);
ctx.stroke();
ctx.fillStyle = color.toString();
ctx.beginPath();
ctx.moveTo(0, h);
ctx.lineTo(0, h - w);
ctx.lineTo(w, h);
ctx.closePath();
ctx.fill();
ctx.fillStyle = color.toString();
ctx.beginPath();
ctx.moveTo(h, 0);
ctx.lineTo(h - w, 0);
ctx.lineTo(h, w);
ctx.closePath();
ctx.fill();
}
// draw four arrows pointing diagonally outwards
arrows();
ctx.translate(this.size, 0);
ctx.rotate(radians(90));
arrows();
};
SymbolMorph.prototype.renderSymbolNormalScreen = function (ctx, color) {
var h = this.size,
w = this.symbolWidth(),
c = w / 2,
off = w / 20;
@ -734,6 +797,51 @@ SymbolMorph.prototype.renderSymbolNormalScreen = function (ctx, color) {
ctx.fill();
};
SymbolMorph.prototype.renderSymbolShrink = function (ctx, color) {
// draw 4 arrows pointing diagonally inwards
var h = this.size,
w = this.symbolWidth(),
c = w / 2,
off = w / 20;
function arrows() {
ctx.strokeStyle = color.toString();
ctx.lineWidth = w / 8;
ctx.beginPath();
ctx.moveTo(c - off * 3, c + off * 3);
ctx.lineTo(off, h - off);
ctx.stroke();
ctx.strokeStyle = color.toString();
ctx.lineWidth = w / 8;
ctx.beginPath();
ctx.moveTo(c + off * 3, c - off * 3);
ctx.lineTo(h - off, off);
ctx.stroke();
ctx.fillStyle = color.toString();
ctx.beginPath();
ctx.moveTo(c + off * 2, c - off * 2);
ctx.lineTo(w - off, c - off * 2);
ctx.lineTo(c + off * 2, 0 + off);
ctx.closePath();
ctx.fill();
ctx.fillStyle = color.toString();
ctx.beginPath();
ctx.moveTo(c - off * 2, c + off * 2);
ctx.lineTo(0 + off, c + off * 2);
ctx.lineTo(c - off * 2, w - off);
ctx.closePath();
ctx.fill();
}
arrows();
ctx.translate(this.size, 0);
ctx.rotate(radians(90));
arrows();
};
SymbolMorph.prototype.renderSymbolSmallStage = function (ctx, color) {
// draw a stage toggling symbol
var w = this.symbolWidth(),
@ -2066,6 +2174,39 @@ SymbolMorph.prototype.renderSymbolList = function (ctx, color) {
ctx.fillRect(0, 0, w, h);
};
SymbolMorph.prototype.renderSymbolFlipHorizontal = function (ctx, color) {
var w = this.symbolWidth(),
h = this.size,
c = w / 2,
off = w / 15;
ctx.strokeStyle = color.toString();
ctx.lineWidth = w / 15;
ctx.beginPath();
ctx.moveTo(0 + off, h - off / 2);
ctx.lineTo(c - off * 1.2, h - off / 2);
ctx.lineTo(c - off * 1.2, off * 2);
ctx.closePath();
ctx.stroke();
ctx.fillStyle = color.toString();
ctx.lineWidth = w / 15;
ctx.beginPath();
ctx.moveTo(w - off, h - off / 2);
ctx.lineTo(c + off * 1.2, h - off / 2);
ctx.lineTo(c + off * 1.2, off * 2);
ctx.closePath();
ctx.stroke();
ctx.fill();
};
SymbolMorph.prototype.renderSymbolFlipVertical = function (ctx, color) {
ctx.translate(0, this.size);
ctx.rotate(radians(-90));
this.renderSymbolFlipHorizontal(ctx, color);
};
/*
// register examples with the World demo menu
// comment out to shave off a millisecond loading speed ;-)