Browse Source

Line width in multilçine text

tentone 5 years ago
parent
commit
4cd59bdcdb

File diff suppressed because it is too large
+ 127 - 127
build/escher.js


+ 6 - 0
examples/playground.html

@@ -274,6 +274,12 @@
 		"\t\tline.layer = -1;\n" +
 		"\t\tgroup.add(line);\n" +
 		"\t\tEscher.QuadraticCurve.curveHelper(line);";
+		multiline.fillStyle = new Escher.LinearGradientStyle();
+		multiline.fillStyle.start.set(-500, 0);
+		multiline.fillStyle.end.set(-300, 0);
+		multiline.fillStyle.addColorStop(0, "#e5ff50");
+		multiline.fillStyle.addColorStop(0.5, "#50ff67");
+		multiline.fillStyle.addColorStop(1, "#32adff");
 		group.add(multiline);
 
 		// Boxes group

+ 1 - 0
source/objects/MultiLineText.js

@@ -89,6 +89,7 @@ MultiLineText.prototype.draw = function(context, viewport, canvas)
 
 			if(this.strokeStyle !== null)
 			{
+				context.lineWidth = this.lineWidth;
 				context.strokeStyle = this.strokeStyle.get(context);
 				context.strokeText(sublines[j], this.position.x, this.position.y + offsetY);
 			}

+ 7 - 3
source/objects/chart/Gauge.js

@@ -1,5 +1,7 @@
 import {Object2D} from "../../Object2D.js";
 import {ColorStyle} from "../style/ColorStyle";
+import {LinearGradientStyle} from "../style/LinearGradientStyle";
+import {Vector2} from "../../math/Vector2";
 
 /**
  * Gauge object is used to draw gauge like graphic.
@@ -82,9 +84,11 @@ function Gauge()
 	 * @type {Style}
 	 */
 	this.barStyle = new LinearGradientStyle();
-	this.barStyle.addColorStop(0, "#61ff50");
-	this.barStyle.addColorStop(0.5, "#ffbb50");
-	this.barStyle.addColorStop(1, "#ff3269");
+	this.barStyle.start.set(-100, 0);
+	this.barStyle.end.set(100, 0);
+	this.barStyle.addColorStop(0, "#e5ff50");
+	this.barStyle.addColorStop(0.5, "#50ff67");
+	this.barStyle.addColorStop(1, "#32adff");
 }
 
 Gauge.prototype = Object.create(Object2D.prototype);

+ 1 - 0
source/objects/chart/Graph.js

@@ -1,6 +1,7 @@
 import {Object2D} from "../../Object2D.js";
 import {Vector2} from "../../math/Vector2.js";
 import {Box2} from "../../math/Box2.js";
+import {ColorStyle} from "../style/ColorStyle";
 
 /**
  * Graph object is used to draw simple graph data into the canvas.

+ 3 - 2
source/objects/style/LinearGradientStyle.js

@@ -1,5 +1,6 @@
 import {Style} from "./Style";
 import {GradientStyle} from "./GradientStyle";
+import {Vector2} from "../../math/Vector2";
 
 /**
  * Linear gradient style, represents a gradient of colors from a point to another interpolating in between.
@@ -20,14 +21,14 @@ function LinearGradientStyle()
      *
      * @type {Vector2}
      */
-    this.start = new Vector2(0, 0);
+    this.start = new Vector2(-100, 0);
 
     /**
      * The coordinates of the ending point of the gradient.
      *
      * @type {Vector2}
      */
-    this.end = new Vector2(0, 0);
+    this.end = new Vector2(100, 0);
 }
 
 LinearGradientStyle.prototype = Object.create(GradientStyle.prototype);

+ 11 - 4
source/objects/style/PatternStyle.js

@@ -1,5 +1,6 @@
 import {Style} from "./Style";
 import {GradientStyle} from "./GradientStyle";
+import {Matrix} from "../../math/Matrix";
 
 /**
  * Pattern style represents an opaque object describing a pattern, based on an image, a canvas, or a video.
@@ -54,14 +55,20 @@ Style.register(PatternStyle, "Pattern");
  */
 PatternStyle.prototype.setTransform = function(transform)
 {
-    // TODO <ADD CODE HERE>
+    this.matrix.m = transform;
+    this.needsUpdate = true;
 };
 
 PatternStyle.prototype.get = function(context)
 {
-    var style = context.createPattern(this.source, this.repetition);
-    style.setTransform(this.matrix.cssTransform());
-    return style;
+    if(this.needsUpdate || this.cache === null)
+    {
+        this.cache = context.createPattern(this.source, this.repetition);
+        this.cache.setTransform(this.matrix.cssTransform());
+        this.needsUpdate = false;
+    }
+
+    return this.cache;
 };
 
 PatternStyle.prototype.serialize = function ()

+ 2 - 0
source/objects/style/RadialGradientStyle.js

@@ -1,5 +1,6 @@
 import {GradientStyle} from "./GradientStyle";
 import {Style} from "./Style";
+import {Vector2} from "../../math/Vector2";
 
 /**
  * Radial gradient interpolates colors from a point to another point around up to a starting and finishing radius value.
@@ -49,6 +50,7 @@ Style.register(RadialGradientStyle, "RadialGradient");
 
 RadialGradientStyle.prototype.get = function(context)
 {
+
     var style = context.createRadialGradient(this.start.x, this.start.y, this.startRadius, this.end.x, this.end.y, this.endRadius);
 
     for(var i = 0; i < this.colors.length; i++)

Some files were not shown because too many files changed in this diff