Fixed export images to HTML5

base.js

@@ -452,13 +452,17 @@ function Shape() {
 			this._yscale = frame._yscale
 			this._rotation = frame._rotation
 			if (frame.fill) {
+				if (frame.fill instanceof Image) {
+					this.fill = cr.createPattern(frame.fill, 'repeat')
+				} else {
 					this.filr = parseInt(parseInt(frame.fill.replace("#",""),16)/65536)
 					this.filg = parseInt(parseInt(frame.fill.replace("#",""),16)/256)%256
 					this.filb = parseInt(parseInt(frame.fill.replace("#",""),16))%256
+					this.fill = "#"+decimalToHex(this.filr,2)+decimalToHex(this.filg,2)+decimalToHex(this.filb,2)
+				}
 				this.linr = parseInt(parseInt(frame.line.replace("#",""),16)/65536)
 				this.ling = parseInt(parseInt(frame.line.replace("#",""),16)/256)%256
 				this.linb = parseInt(parseInt(frame.line.replace("#",""),16))%256
-				this.fill = "#"+decimalToHex(this.filr,2)+decimalToHex(this.filg,2)+decimalToHex(this.filb,2)
 				this.line = "#"+decimalToHex(this.linr,2)+decimalToHex(this.ling,2)+decimalToHex(this.linb,2)
 			}
 		} else {
@@ -468,6 +472,9 @@ function Shape() {
 			this._yscale = ave(frame2._yscale, frame._yscale, r)
 			this._rotation = ave(frame2._rotation ,frame._rotation, r)
 			if (frame2.fill) {
+				if (frame.fill instanceof Image) {
+					this.fill = cr.createPattern(frame.fill, 'repeat')
+				} else {
 					this.filr2 = parseInt(parseInt(frame2.fill.replace("#",""),16)/65536)
 					this.filg2 = parseInt(parseInt(frame2.fill.replace("#",""),16)/256)%256
 					this.filb2 = parseInt(parseInt(frame2.fill.replace("#",""),16))%256
@@ -479,6 +486,7 @@ function Shape() {
 					this.filb = parseInt(ave(this.filb2, this.filba, r))
 					this.fill = "#"+decimalToHex(this.filr,2)+decimalToHex(this.filg,2)+decimalToHex(this.filb,2)
 				}
+			}
 			if (frame2.line) {
 				this.linr2 = parseInt(parseInt(frame2.line.replace("#",""),16)/65536)
 				this.ling2 = parseInt(parseInt(frame2.line.replace("#",""),16)/256)%256
@@ -497,22 +505,56 @@ function Shape() {
 		cr.translate(this._x,this._y)
 		cr.rotate(this._rotation*Math.PI/180)
 		cr.scale(this._xscale*1.0, this._yscale*1.0)
+		if (this.fill instanceof Image) {
+			
+		} else {
 			cr.fillStyle = this.fill.substr(0,7);
+		}
 		cr.strokeStyle = this.line.substr(0,7);
+		xs = []
+		ys = []
 		for (i in this._shapedata) {
 			if (this._shapedata[i][0]=="M") {
 				cr.moveTo(this._shapedata[i][1],this._shapedata[i][2])
+				xs.push(this._shapedata[i][1])
+				ys.push(this._shapedata[i][2])
 			} else if (this._shapedata[i][0]=="L") {
 				cr.lineTo(this._shapedata[i][1],this._shapedata[i][2])
+				xs.push(this._shapedata[i][1])
+				ys.push(this._shapedata[i][2])
 			} else if (this._shapedata[i][0]=="C") {
 				cr.bezierCurveTo(this._shapedata[i][1],this._shapedata[i][2],
 								 this._shapedata[i][3]-1e-5,this._shapedata[i][4]+1e-5,
 								 this._shapedata[i][5]-1e-5,this._shapedata[i][6]+1e-5)
+				xs.push(this._shapedata[i][1])
+				xs.push(this._shapedata[i][3])
+				xs.push(this._shapedata[i][5])
+				ys.push(this._shapedata[i][2])
+				ys.push(this._shapedata[i][4])
+				ys.push(this._shapedata[i][6])
 			}
 		}
 		if (this.filled) {
+			if (this.fill instanceof Image) {
+				cr.save(); // Save the context before clipping
+				cr.clip(); // Clip to whatever path is on the context
+
+				x = Math.min.apply(null,xs)
+				y = Math.min.apply(null,ys)
+				w = Math.max.apply(null,xs)-x
+				h = Math.max.apply(null,ys)-y
+				var imgHeight = w / this.fill.width * this.fill.height;
+				// if (imgHeight < h){
+				//   cr.fillStyle = '#000';
+				//   cr.fill();
+				// }
+				cr.drawImage(this.fill,x,y,w,imgHeight);
+
+				cr.restore(); // Get rid of the clipping region
+			} else {
 				cr.stroke()
 				cr.fill()
+			}
 		} else {
 			cr.stroke()
 		}

svlgui.py

@@ -10,6 +10,7 @@ import random
 import colors
 import platform
 import re
+import shutil
 
 import traceback
 try:
@@ -86,10 +87,11 @@ class Color (object):
 				self.type = "RGB"
 				self.val = hex2rgb(val)
 			else:
+				global Library
+				Library.append(self)
 				self.type = "Image"
 				self.val = val
-				if SYSTEM=="osx":
+				self.set_image(val)
-					self.image = GUI.Image(file=val)
 	def _getcairo(self):
 		if self.type=="RGB":
 			return cairo.SolidPattern(*self.val)
@@ -118,6 +120,17 @@ class Color (object):
 	cairo = property(_getcairo)
 	pygui = property(_getpygui)
 	rgb = property(_getrgb, _setrgb)
+	def set_image(self, path):
+		if SYSTEM=="osx":
+			self.image = GUI.Image(file=path)
+	def print_sc(self):
+		retval = ".png "+self.val.split('/')[-1].replace(' ','_').replace('.','_')+" \""+self.val+"\"\n"
+		return retval
+	def print_html(self):
+		shutil.copy(self.val, os.getenv('HOME')+"/"+self.val.split('/')[-1])
+		retval = "var "+self.val.split('/')[-1].replace(' ','_').replace('.','_')+" = new Image();\n"
+		retval = retval+self.val.split('/')[-1].replace(' ','_').replace('.','_')+".src = \""+self.val.split("/")[-1]+"\";\n"
+		return retval
 def rgb2hex(r, g, b, a=1):
 	r=hex(int(r*255)).split("x")[1].zfill(2)
 	g=hex(int(g*255)).split("x")[1].zfill(2)
@@ -1698,12 +1711,18 @@ class Shape (object):
 		retval+=".outline "+self.name+"outline:\n"
 		retval+=" ".join([" ".join([str(x) for x in a]) for a in self.shapedata])+"\n.end\n"
 		if self.filled:
+			if self.fillcolor.type=="Image":
+				retval+=".filled "+self.name+" outline="+self.name+"outline fill="+self.fillcolor.val.split('/')[-1].replace(' ','_').replace('.','_')+" color="+self.linecolor.rgb+" line="+str(self.linewidth)+"\n"
+			else:
 				retval+=".filled "+self.name+" outline="+self.name+"outline fill="+self.fillcolor.rgb+" color="+self.linecolor.rgb+" line="+str(self.linewidth)+"\n"
 		else:
 			retval+=".filled "+self.name+" outline="+self.name+"outline fill=#00000000 color="+self.linecolor.rgb+" line="+str(self.linewidth)+"\n"
 		return retval
 	def print_html(self):
 		retval = "var "+self.name+" = new Shape();\n"+self.name+"._shapedata = "+str(self.shapedata)+";\n"
+		if self.fillcolor.type=="Image":
+			retval += self.name+".fill = "+self.fillcolor.val.split('/')[-1].replace(' ','_').replace('.','_')+";\n"+self.name+".line = \""+self.linecolor.rgb+"\";\n"
+		else:
 			retval += self.name+".fill = \""+self.fillcolor.rgb+"\";\n"+self.name+".line = \""+self.linecolor.rgb+"\";\n"
 		retval += self.name+".filled = "+str(self.filled).lower()+";\n"
 		return retval

todo.txt

@@ -0,0 +1,9 @@
++ grouping things & select multiple
++ text
++ undo
++ scale
+scaling of images
+moving keyframes
++ sound
++ moving an object with arrow keys
+movie clips