v3

EntityPlantt · EntityPlantt · commit 8f94158aac9f · 2022-02-18T12:15:49.000+01:00
- Added ImageAsset.posFromCenter and RectAsset.posFromCenter
- Added about -||- in the docs
- Made the code in the example thesun.html simpler with the new update
diff --git a/Canvas2d.js b/Canvas2d.js
@@ -70,11 +70,11 @@ Canvas2d.ImageAsset = class extends Canvas2d.Asset {
 		this.width = width;
 		this.height = height;
 	}
-	x = 0; y = 0; rotation = 0;
+	x = 0; y = 0; rotation = 0; posFromCenter = false;
 	draw() {
 		var ctx = this.parent.context;
 		ctx.save();
-		ctx.translate(this.x + this.width / 2, this.y + this.height / 2);
+		ctx.translate(this.x + (this.posFromCenter ? 0 : (this.width / 2)), this.y + (this.posFromCenter ? 0 : (this.height / 2)));
 		ctx.rotate(this.rotation * Math.PI / 180);
 		ctx.drawImage(this.image, this.width / -2, this.height / -2, this.width, this.height);
 		ctx.restore();
@@ -110,12 +110,12 @@ Canvas2d.RectAsset = class extends Canvas2d.Asset {
 		this.height = height;
 		this.color = color;
 	}
-	rotation = 0; stroke = false;
+	rotation = 0; stroke = false; posFromCenter = false;
 	draw() {
 		var ctx = this.parent.context;
 		ctx.save();
 		ctx[this.stroke ? "strokeStyle" : "fillStyle"] = this.color;
-		ctx.translate(this.x + this.width / 2, this.y + this.height / 2);
+		ctx.translate(this.x + (this.posFromCenter ? 0 : (this.width / 2)), this.y + (this.posFromCenter ? 0 : (this.height / 2)));
 		ctx.rotate(this.rotation * Math.PI / 180);
 		ctx[this.stroke ? "strokeRect" : "fillRect"](this.width / -2, this.height / -2, this.width, this.height);
 		ctx.restore();
diff --git a/docs/index.html b/docs/index.html
@@ -156,6 +156,8 @@ <h2>height<span>: Number</span></h2>
 		<p>The image height. Assigned value in <a href="#Canvas2d.ImageAsset.constructor">the constructor</a>.</p>
 		<h2>rotation<span>: Number</span></h2>
 		<p>The image clockwise rotation (pivot point is image center) in degrees.</p>
+		<h2>posFromCenter<span>: Boolean</span></h2>
+		<p>If true, the <a href="#Canvas2d.ImageAsset.x">X</a> and <a href="#Canvas2d.ImageAsset.y">Y</a> will be the coordinates of the image center. Defaults to <code>false</code>.</p>
 		<h2>draw <span>(): undefined</span></h2>
 		<p>Draws the image on the canvas. Called from <a href="#Canvas2d.Scene.draw">Canvas2d.Scene.draw</a>.</p>
 
@@ -202,6 +204,8 @@ <h2>stroke<span>: Boolean</span></h2>
 		<p>If true, the rectangle will be stroked instead of filled. Defaults to <code>false</code>.</p>
 		<h2>rotation<span>: Number</span></h2>
 		<p>The rectangle clockwise rotation (pivot point is image center) in degrees.</p>
+		<h2>posFromCenter<span>: Boolean</span></h2>
+		<p>If true, the <a href="#Canvas2d.RectAsset.x">X</a> and <a href="#Canvas2d.RectAsset.y">Y</a> will be the coordinates of the rectangle center. Defaults to <code>false</code>.</p>
 		<h2>draw <span>(): undefined</span></h2>
 		<p>Draws the rectangle on the canvas. Called from <a href="#Canvas2d.Scene.draw">Canvas2d.Scene.draw</a>.</p>
 	</div>
diff --git a/examples/thesun.html b/examples/thesun.html
@@ -3,7 +3,6 @@
 <head>
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
-	<title>Canvas2d.js testing</title>
 	<script type="text/javascript" src="../Canvas2d.js"></script>
 	<style type="text/css">
 		body, html {
@@ -21,6 +20,7 @@
 			canvas = new Canvas2d.Scene(document.getElementById("canvas"));
 			canvas.background = "#d8d8d8";
 			sun = new Canvas2d.ImageAsset(document.getElementById("sun"), 300, 300);
+			sun.posFromCenter = true;
 			canvas.add(sun);
 			text = new Canvas2d.TextAsset("The sun!", 0, 0, "100px Arial");
 			text.stroke = true;
@@ -36,8 +36,8 @@
 				rect.height = innerHeight - 20;
 				text.x = innerWidth / 2;
 				text.y = innerHeight / 2;
-				sun.x = (innerWidth - sun.width) / 2;
-				sun.y = (innerHeight - sun.height) / 2;
+				sun.x = innerWidth / 2;
+				sun.y = innerHeight / 2;
 				sun.rotation++;
 				canvas.width = innerWidth;
 				canvas.height = innerHeight;
