kopia lustrzana https://github.com/backface/turtlestitch
enable pensize on stage drawing and SVG export
Michael Aschauer
rodzic
fdf3dacb4c
commit
eabe566376
|
|
@ -36,19 +36,66 @@ SpriteMorph.prototype.addStitch = function(x1, y1, x2, y2) {
|
|||
this.cache.addMaterial(material);
|
||||
}
|
||||
|
||||
var geometry = this.cache.findGeometry('stitch', [x1,y1,x2,y2]);
|
||||
if (!geometry) {
|
||||
geometry = new THREE.Geometry();
|
||||
// render as plain lines
|
||||
if (false) {
|
||||
var geometry = this.cache.findGeometry('stitch', [x1,y1,x2,y2]);
|
||||
if (!geometry) {
|
||||
geometry = new THREE.Geometry();
|
||||
geometry.vertices = [
|
||||
new THREE.Vector3(x1, y1, 0.0),
|
||||
new THREE.Vector3(x2, y2, 0.0),
|
||||
];
|
||||
this.cache.addGeometry('stitch', geometry, [x1,y1,x2,y2]);
|
||||
}
|
||||
|
||||
line = new THREE.Line(geometry, material);
|
||||
stage.myStitchLines.add(line);
|
||||
}
|
||||
// render as quads
|
||||
if (true) {
|
||||
var material = new THREE.MeshBasicMaterial(
|
||||
{ color: color, side:THREE.DoubleSide, opacity: 0.8 } );
|
||||
var geometry = new THREE.Geometry();
|
||||
var s = stage.penSize / 2;
|
||||
|
||||
normal = new THREE.Vector3( -(y2-y1), (x2-x1), 0);
|
||||
normal = normal.normalize();
|
||||
//dir = new THREE.Vector3( (x2-x1), (y2-y1), 0);
|
||||
//dir = dir.normalize();
|
||||
|
||||
material.transparent = false;
|
||||
/*geometry.vertices = [
|
||||
new THREE.Vector3(x1 + normal.x * s - s * dir.x, y1 + normal.y * s - s * dir.y, 0.0),
|
||||
new THREE.Vector3(x2 + normal.x * s + s * dir.x, y2 + normal.y * s + s * dir.y, 0.0),
|
||||
new THREE.Vector3(x2 - normal.x * s + s * dir.x, y2 - normal.y * s + s * dir.y, 0.0),
|
||||
new THREE.Vector3(x1 - normal.x * s - s * dir.x, y1 - normal.y * s - s * dir.y, 0.0),
|
||||
new THREE.Vector3(x1 + normal.x * s - s * dir.x, y1 + normal.y * s - s * dir.y, 0.0),
|
||||
];*/
|
||||
geometry.vertices = [
|
||||
new THREE.Vector3(x1, y1, 0.0),
|
||||
new THREE.Vector3(x2, y2, 0.0),
|
||||
new THREE.Vector3(x1 + normal.x * s, y1 + normal.y * s, 0.0),
|
||||
new THREE.Vector3(x2 + normal.x * s, y2 + normal.y * s, 0.0),
|
||||
new THREE.Vector3(x2 - normal.x * s, y2 - normal.y * s, 0.0),
|
||||
new THREE.Vector3(x1 - normal.x * s, y1 - normal.y * s, 0.0),
|
||||
new THREE.Vector3(x1 + normal.x * s, y1 + normal.y * s, 0.0),
|
||||
];
|
||||
this.cache.addGeometry('stitch', geometry, [x1,y1,x2,y2]);
|
||||
geometry.faces.push(new THREE.Face3(0, 1, 2));
|
||||
geometry.faces.push(new THREE.Face3(0, 2, 3));
|
||||
line = new THREE.Mesh(geometry, material);
|
||||
stage.myStitchLines.add(line);
|
||||
|
||||
// add a circle to simulate linecaps:round in svg
|
||||
if (stage.penSize > 1) {
|
||||
geometry = new THREE.CircleGeometry( s, 32 );
|
||||
geometry.faces.push(new THREE.Face3(0, 1, 2));
|
||||
geometry.faces.push(new THREE.Face3(0, 2, 3));
|
||||
var circle = new THREE.Mesh( geometry, material );
|
||||
circle.translateX(x2);
|
||||
circle.translateY(y2);
|
||||
circle.visible = true;
|
||||
stage.myStitchLines.add(circle);
|
||||
}
|
||||
}
|
||||
|
||||
line = new THREE.Line(geometry, material);
|
||||
|
||||
stage.myStitchLines.add(line);
|
||||
this.lastJumped = false;
|
||||
stage.reRender();
|
||||
};
|
||||
|
|
@ -95,7 +142,8 @@ SpriteMorph.prototype.addStitchPoint = function(x2, y2) {
|
|||
var geometry = this.cache.findGeometry('stitchPoint', [d,]);
|
||||
if (!geometry) {
|
||||
geometry = new THREE.Geometry();
|
||||
var d = (stage.penSize * 1.4) / 2;
|
||||
//var d = (stage.penSize * 1.4) / 2;
|
||||
var d = 0.7;
|
||||
geometry.vertices = [
|
||||
new THREE.Vector3(-d, -d, 0.011),
|
||||
new THREE.Vector3(+d, -d, 0.011),
|
||||
|
|
@ -489,6 +537,7 @@ SpriteMorph.prototype.setSize = function (size) {
|
|||
this.size = Math.min(Math.max(+size, 0.0001), 1000);
|
||||
}
|
||||
stage.setPenSize(this.size);
|
||||
stage.turtleShepherd.setPenSize(this.size);
|
||||
};
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -21,8 +21,10 @@ TurtleShepherd.prototype.init = function() {
|
|||
this.calcTooLong = true;
|
||||
this.densityMax = 15;
|
||||
this.colors = [];
|
||||
this.newColor = false;
|
||||
this.oldColor = null;
|
||||
this.newColor = 0;
|
||||
this.oldColor = 0;
|
||||
this.penSize = 1;
|
||||
this.newPenSize = 0;
|
||||
};
|
||||
|
||||
|
||||
|
|
@ -44,8 +46,10 @@ TurtleShepherd.prototype.clear = function() {
|
|||
this.tooLongCount = 0;
|
||||
this.densityWarning = false;
|
||||
this.colors = [];
|
||||
this.newColor = false;
|
||||
this.oldColor = null;
|
||||
this.newColor = 0;
|
||||
this.oldColor = 0;
|
||||
this.penSize = 1;
|
||||
this.newPenSize = 0;
|
||||
};
|
||||
|
||||
|
||||
|
|
@ -166,6 +170,10 @@ TurtleShepherd.prototype.moveTo= function(x1, y1, x2, y2, penState) {
|
|||
this.pushColorChangeNow();
|
||||
}
|
||||
|
||||
if (this.newPenSize) {
|
||||
this.pushPenSizeNow();
|
||||
}
|
||||
|
||||
if (x2 < this.minX) this.minX = x2;
|
||||
if (x2 > this.maxX) this.maxX = x2;
|
||||
|
||||
|
|
@ -255,7 +263,28 @@ TurtleShepherd.prototype.pushColorChangeNow = function() {
|
|||
);
|
||||
this.oldColor = this.newColor;
|
||||
this.newColor = false;
|
||||
};
|
||||
|
||||
TurtleShepherd.prototype.setPenSize = function(s) {
|
||||
this.newPenSize = s;
|
||||
};
|
||||
|
||||
TurtleShepherd.prototype.pushPenSizeNow = function() {
|
||||
n = this.newPenSize;
|
||||
o = this.penSize;
|
||||
|
||||
if (n == o) {
|
||||
this.newPenSize = false;
|
||||
return;
|
||||
}
|
||||
this.cache.push(
|
||||
{
|
||||
"cmd":"pensize",
|
||||
"pensize": n
|
||||
}
|
||||
);
|
||||
this.penSize = this.newPenSize;
|
||||
this.newPenSize = false;
|
||||
};
|
||||
|
||||
/*
|
||||
|
|
@ -331,6 +360,8 @@ TurtleShepherd.prototype.toSVG = function() {
|
|||
hasFirst = false;
|
||||
tagOpen = false;
|
||||
colorChanged = false;
|
||||
penSizeChanged = false;
|
||||
penSize = 1;
|
||||
lastStitch = null;
|
||||
color = { r:0, g:0, b:0, a:255 };
|
||||
|
||||
|
|
@ -340,17 +371,23 @@ TurtleShepherd.prototype.toSVG = function() {
|
|||
colorChanged = true;
|
||||
if (tagOpen) svgStr += '" />\n';
|
||||
tagOpen = false;
|
||||
|
||||
} else if (this.cache[i].cmd == "pensize") {
|
||||
penSize = this.cache[i].pensize;
|
||||
penSizeChanged = true;
|
||||
if (tagOpen) svgStr += '" />\n';
|
||||
tagOpen = false;
|
||||
} else if (this.cache[i].cmd == "move") {
|
||||
stitch = this.cache[i];
|
||||
if (!hasFirst) {
|
||||
if (stitch.penDown) {
|
||||
svgStr += '<path fill="none" style="stroke:rgb('+
|
||||
color.r + ',' + color.g + ',' + color.b +
|
||||
')" d="M ' +
|
||||
(this.initX - this.minX) +
|
||||
' ' +
|
||||
(this.maxY - this.initY) ;
|
||||
svgStr += '<path fill="none" style="' +
|
||||
'stroke:rgb('+ color.r + ',' + color.g + ',' + color.b + '); ' +
|
||||
'stroke-width:' + penSize + ';' +
|
||||
'stroke-linecap:round;"' +
|
||||
' d="M ' +
|
||||
(this.initX - this.minX) +
|
||||
' ' +
|
||||
(this.maxY - this.initY) ;
|
||||
hasFirst = true;
|
||||
tagOpen = true;
|
||||
} else {
|
||||
|
|
@ -358,10 +395,12 @@ TurtleShepherd.prototype.toSVG = function() {
|
|||
}
|
||||
} else {
|
||||
if (stitch.penDown ) {
|
||||
if (!lastStich.penDown || colorChanged) {
|
||||
svgStr +=' <path fill="none" style="stroke:rgb('+
|
||||
color.r + ',' + color.g + ',' + color.b +
|
||||
')" d="M ' +
|
||||
if (!lastStich.penDown || colorChanged || penSizeChanged) {
|
||||
svgStr += '<path fill="none" style="' +
|
||||
'stroke:rgb('+ color.r + ',' + color.g + ',' + color.b + '); ' +
|
||||
'stroke-width:' + penSize + ';' +
|
||||
'stroke-linecap:round;"' +
|
||||
' d="M ' +
|
||||
(lastStich.x - this.minX) +
|
||||
' ' +
|
||||
(this.maxY - lastStich.y) +
|
||||
|
|
@ -376,6 +415,7 @@ TurtleShepherd.prototype.toSVG = function() {
|
|||
(this.maxY - stitch.y);
|
||||
tagOpen = true;
|
||||
colorChanged = false;
|
||||
penSizeChanged = false;
|
||||
} else {
|
||||
if (tagOpen) svgStr += '" />\n';
|
||||
tagOpen = false;
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue