nojhan/stripit
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fichier principal renommé

Browse source
This commit is contained in:
MCMic 2009-11-15 02:35:33 +00:00
commit 4903923a8e
1 changed files with 0 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

560
striped/GeekscottesMakerV2.svg
View file

@ -1,560 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:xlink="http://www.w3.org/1999/xlink"
id="svg">
<title>Geekscottes maker ALPHA</title>
<defs id="defs">
<!--
TODO
defs :
Définir ici tous les icônes : croix, actualiser, plus, etc, etc
-->
<path id="croix" d="M 10 10 L 15 15 L 20 10 L 15 15 L 10 20 L 15 15 L 20 20" style="stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;"/>
<g id="actualiser">
<circle cx="5" cy="5" r="5" stroke="black" stroke-width="3" fill-opacity="0"/>
<path d="M 9 9 L 5 5" stroke="black" stroke-width="3" fill="none"/>
</g>
<g id="sauver">
<rect width="10" height="10" fill-opacity="0" stroke="black" stroke-width="3"/>
<circle cx="5" cy="5" r="5" stroke="black" stroke-width="3" fill-opacity="0"/>
</g>
</defs>
<g id="strip" >
</g>
<!--<g id="case_1" transform="translate(0,100)">
<g id="contenu" transform="translate(0,145)scale(0.7)">
<use id="personnage_g" xlink:href="#oldtux" display="inline"/>
<use id="personnage_d" xlink:href="#oldtux" display="inline" transform="scale(-1,1)translate(-880)"/>
<g id="bulle_1" transform="translate(280)">
<path style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 34.345187,41.199484 C 37.435469,13.765525 119.75324,16.680839 188.89853,17.460899 C 243.33906,18.075068 320.82456,6.6953948 328.29958,46.755323 C 338.7968,107.48398 250.19808,95.647905 205.56604,96.757874 C 160.9437,97.867602 128.80494,93.348698 81.317279,92.717264 C 70.761213,92.571352 34.728914,118.66279 11.616754,120.49646 C 26.610412,112.20373 39.510738,101.1199 46.467017,82.110663 C 45.764437,67.360926 31.254905,68.633443 34.345187,41.199484 z"
id="pathBulle_1" />
<text id="textebulle_1"></text>
</g>
<g id="bulle_2" transform="translate(280,250)">
<path style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 54,21 L 154,21 Q 174,21 174,41 L 174,101 Q 174,121 154,121 L 54,121 Q 34,121 34,101 L 34,41 Q 34,21 54,21 z"
id="pathBulle_2" />
<text id="textebulle_2"></text>
</g>
</g>
<rect
style="fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:3.91113186;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dashoffset:0;stroke-opacity:1"
id="cadre"
width="600"
height="480"
x="10" y="0" ry="0" />
</g>-->
<g id="formulaire" transform="translate(0,300)">
<switch>
<foreignObject width="1000" height="1000">
<body xmlns="http://www.w3.org/1999/xhtml">
<div>
<form method="post" action="javascript:chargerURL(document.getElementById('url').value)">
<fieldset style="" id="upload">
<legend>Charger un strip</legend>
<label for="url">Adresse du fichier : </label><input type="text" id="url" name="url" value="geekscottes_133.xml" size="50"/>
<input type="submit" value="Ouvrir"/>
</fieldset>
<fieldset>
<legend>Code XML du strip</legend>
<textarea id="xml_area" rows="15" cols="130">code</textarea>
</fieldset>
</form>
</div>
</body>
</foreignObject>
<text x="50" y="50">Votre navigateur ne supporte pas la balise ForeignObject, vous ne pourrez pas utiliser cet outil.</text>
</switch>
</g>
<script type="text/javascript">
<![CDATA[
const svgNS = "http://www.w3.org/2000/svg";
idstrip = 0;
// Point
function Point(x, y) {
this.x = x;
this.y = y;
}
// CurvePoint
function CurvePoint(type, pointList) {
this.type = type;
this.pointList = pointList;
this.setOffset = function(start, end, off_x, off_y) {
for(var i = start ; i < end ; i++) {
this.pointList[i].x += off_x;
this.pointList[i].y += off_y;
}
}
this.toString = function() {
var str = this.type + " ";
for(var i = 0 ; i < this.pointList.length ; i++) {
str += this.pointList[i].x + "," + this.pointList[i].y + " ";
}
return str;
}
}
function PM(x, y) {
return new CurvePoint("M", [new Point(x, y)]);
}
function PL(x, y) {
return new CurvePoint("L", [new Point(x, y)]);
}
function PQ(x1, y1, x2, y2) {
return new CurvePoint("Q", [new Point(x1, y1), new Point(x2, y2)]);
}
/*function PC(x1, y1, x2, y2, x3, y3) {
return new CurvePoint("C", [new Point(x1, y1), new Point(x2, y2), new Point(x3, y3)]);
}*/
// Curve
function Curve(points, closed) {
this.points = points;
this.setOffset = function(start,startP, end,endP, off_x, off_y) {
this.points[start].setOffset(startP,this.points[start].pointList.length, off_x, off_y);
for(var i = start+1 ; i < end ; i++) {
this.points[i].setOffset(0,this.points[i].pointList.length,off_x, off_y);
}
this.points[end].setOffset(0,endP, off_x, off_y);
}
this.toString = function() {
var str = "";
for(var i = 0 ; i < this.points.length ; i++) {
str += this.points[i].toString();
}
if(this.closed) {
str += "z"
}
return str;
}
this.closed = closed;
}
//Objet Case
function Case(num, width, fond) {
this.num = parseInt(num);
this.width = parseInt(width);
this.fond = fond;
this.persos = new Array();
this.bulles = new Array();
//var this.strip;
this.alert = function() {
alert("Taille: " + this.width + " Num: " + this.num);
}
this.ajouterPerso = function(perso) {
this.persos.push(perso);
perso.case = this;
}
this.ajouterBulle = function(bulle) {
this.bulles.push(bulle);
bulle.case = this;
}
this.getNoeud = function(height, left) {
var noeud_fond = document.createElementNS(svgNS, "use");
noeud_fond.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href", this.fond);
var noeud_croix = document.createElementNS(svgNS, "use");
noeud_croix.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href", "#croix");
noeud_croix.style.visibility = 'hidden';
noeud_croix.strip = this.strip;
noeud_croix.case = this;
noeud_croix.setAttribute("onclick","javascript:this.strip.supprimerCase(this.case.num);");
var noeud_case = document.createElementNS(svgNS, "g");
//noeud_case.strip = this.strip;
noeud_case.appendChild(noeud_fond);
noeud_case.setAttribute("id", "strip-"+this.strip.id+"-case-"+this.num);
noeud_case.setAttribute("transform", "translate("+left+")");
noeud_case.croix = noeud_croix;
noeud_case.setAttribute("onmouseover","javascript:this.croix.style.visibility = 'visible'");
noeud_case.setAttribute("onmouseout","javascript:this.croix.style.visibility = 'hidden'");
var noeud_cadre = document.createElementNS(svgNS, "rect");
noeud_cadre.setAttribute("style","fill: none; stroke: rgb(0, 0, 0); stroke-width: 4;");
noeud_cadre.setAttribute("width",this.width);
noeud_cadre.setAttribute("height",height);
noeud_cadre.setAttribute("x",0);
noeud_cadre.setAttribute("y",0);
// AJOUTER LES PERSOS
for(this.i=0;(this.i < this.persos.length);this.i++) {
noeud_case.appendChild(this.persos[this.i].getNoeud());
// AJOUTER LES BULLES DES PERSOS
for(this.j=0;(this.j < this.persos[this.i].bulles.length);this.j++) {
noeud_case.appendChild(this.persos[this.i].bulles[this.j].getNoeud());
}
}
// AJOUTER LES BULLES
for(this.i=0;(this.i < this.bulles.length);this.i++) {
noeud_case.appendChild(this.bulles[this.i].getNoeud());
}
noeud_case.appendChild(noeud_cadre); // le cadre est par dessus le reste
noeud_case.appendChild(noeud_croix);
return noeud_case;
}
this.getXML = function(tab) {
this.xml = tab+"<case fond=\""+this.fond+"\" width=\""+this.width+"\">\n"
// AJOUTER LES PERSOS
for(this.i=0;(this.i < this.persos.length);this.i++) {
this.xml += this.persos[this.i].getXML(tab+"\t");
}
// AJOUTER LES BULLES
for(this.i=0;(this.i < this.bulles.length);this.i++) {
this.xml += this.bulles[this.i].getXML(tab+"\t");
}
this.xml += tab+"</case>\n";
return this.xml;
}
}
//Objet Perso
function Perso(lien, x, y, pos) {
this.url = lien;
this.x = parseInt(x);
this.y = parseInt(y);
this.pos = pos;
this.bulles = new Array();
this.alert = function() {
alert("Position: " + this.x + ", " + this.y + " Url: " + this.url);
}
this.draw = function() {
document.getElementById("personnage_"+this.pos).setAttribute("xlink:href", this.url);
}
this.ajouterBulle = function(bulle) {
this.bulles.push(bulle);
bulle.perso = this;
}
this.getNoeud = function() {
noeud_perso = document.createElementNS(svgNS, "use");
noeud_perso.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href", this.url);
if(this.pos == "gauche") transform = "translate("+this.x+","+this.y+")";
if(this.pos == "droite") transform = "translate("+(this.x+250)+","+this.y+") scale(-1,1)"
noeud_perso.setAttribute("transform", transform);
return noeud_perso;
}
this.getXML = function(tab) {
this.xml = tab+"<personnage url=\""+this.url+"\" x=\""+this.x+"\" y=\""+this.y+"\" pos=\""+this.pos+"\">\n";
for(this.i=0;this.i < this.bulles.length;this.i++) {
this.xml += this.bulles[this.i].getXML(tab+"\t");
}
this.xml += tab+"</personnage>\n";
return this.xml;
}
}
function ajouteTSpan(parent, texte, x, y) {
noeud_span = document.createElementNS(svgNS, "tspan");
noeud_span.setAttribute("x", x);
noeud_span.setAttribute("y", y);
noeud_span.textContent = texte;
parent.appendChild(noeud_span);
}
// Objet Bulle
function Bulle(x, y, texte, w, size) {
this.x = parseInt(x);
this.y = parseInt(y);
this.w = parseInt(w);
this.size = parseInt(size);
this.h = 100;
this.texte = texte;
this.actuPath = function() {
this.path = new Curve([
PM((this.x+20),this.y),
PL((this.x+this.w-20),this.y), //haut de la bulle
PQ((this.x+this.w),this.y,(this.x+this.w),(this.y+20)),
PL((this.x+this.w),(this.y+this.h-20)), //droite de la bulle
PQ((this.x+this.w),(this.y+this.h),(this.x+this.w-20),(this.y+this.h)),
PL((this.x+20),(this.y+this.h)), //bas de la bulle
PQ(this.x,(this.y+this.h),this.x,(this.y+this.h-20)),
PL(this.x,(this.y+20)), //gauche de la bulle
PQ(this.x,this.y,(this.x+20),this.y)
], true);
}
this.alert = function() {
alert("Position: " + this.x + ", " + this.y + " Texte: " + this.texte);
}
/*this.delier = function() {
this.perso = null;
}*/
this.getNoeud = function() {
noeud_bulle = document.createElementNS(svgNS, "g");
noeud_texte = this.getNoeudTexte();
noeud_path = document.createElementNS(svgNS, "path");
this.actuPath();
noeud_path.setAttribute("d", this.path.toString());
noeud_path.setAttribute("style", "fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0); stroke-width: 3;");
noeud_bulle.appendChild(noeud_path);
noeud_bulle.appendChild(noeud_texte);
noeud_bulle.setAttribute("onmouseover","javascript:this.childNodes[0].setAttribute(\"style\",\"fill: rgb(255, 255, 255); stroke: red; stroke-width: 3;\");");
noeud_bulle.setAttribute("onmouseout","javascript:this.childNodes[0].setAttribute(\"style\",\"fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0); stroke-width: 3;\");");
return noeud_bulle;
}
this.getNoeudTexte = function() {
const espace_ligne = 20;
var noeud_texte = document.createElementNS(svgNS, "text");
if(!isNaN(this.size)) noeud_texte.setAttributeNS(null,"font-size", this.size);
const b_parent = document.getElementById("strip");
var mots = this.texte.split(" ");
var mot_act = 0;
var nb_mots = mots.length;
var num_ligne = 1;
// On crée un noeud <text> temporaire, pour les calculs de longueur
noeud_temp = document.createElementNS(svgNS, "text");
if(!isNaN(this.size)) noeud_temp.setAttributeNS(null,"font-size", this.size);
noeud_temp.textContent = "";
b_parent.appendChild(noeud_temp);
while (mot_act < nb_mots) {
// On sauvegarde la ligne actuelle
var texte_act = noeud_temp.textContent;
var taille_act = noeud_temp.getComputedTextLength();
// On tente l'insertion du mot suivant
if (noeud_temp.textContent != "")
noeud_temp.textContent += " ";
noeud_temp.textContent+= mots[mot_act];
var longueur = noeud_temp.getComputedTextLength();
if (longueur > this.w && texte_act != "") {
// Trop long (et il y avait déjà des mots sur la ligne)
x = this.x+(this.w-taille_act)/2;
y = this.y + num_ligne * espace_ligne + 5;
ajouteTSpan(noeud_texte, texte_act, x, y);
noeud_temp.textContent = "";
num_ligne++;
} else {
mot_act++;
}
}
if (noeud_temp.textContent != "") {
x = this.x+(this.w-noeud_temp.getComputedTextLength())/2;
y = this.y + num_ligne * espace_ligne + 5;
ajouteTSpan(noeud_texte, noeud_temp.textContent, x, y);
num_ligne++;
}
b_parent.removeChild(noeud_temp);
this.h = espace_ligne * (num_ligne);
return noeud_texte;
}
this.actuPath();
/*this.getXml = function() { //renvoi un objet XML contenant la bulle
noeud_bulle =
}*/
this.getXML = function(tab) {
return tab+"<bulle x=\""+this.x+"\" y=\""+this.y+"\" width=\""+this.w+"\" contour=\""+this.contour+"\">"+this.texte+"</bulle>\n";
}
}
//Objet Strip
function Strip(id, x, y, height, editable) {
this.noeud = document.getElementById(id);
this.id = idstrip++;
this.x = parseInt(x);
this.y = parseInt(y);
this.height = parseInt(height);
this.cases = new Array();
this.noeud.setAttribute("transform", "translate("+this.x+","+this.y+")");
this.editable = editable;
this.ajouterCase = function(c) {
this.cases.push(c);
c.strip = this;
}
this.supprimerCase = function(i) {
this.noeud.removeChild(document.getElementById("strip-"+this.id+"-case-"+i)); // suppression du nœud SVG de la case
for(var num=i+1;num<this.cases.length;num++) { // décalage des nœuds SVG des autres cases
document.getElementById("strip-"+this.id+"-case-"+num).setAttribute("transform", document.getElementById("strip-"+this.id+"-case-"+num).getAttribute("transform")+"translate(-"+(20+this.cases[i].width)+")");
}
this.fond.setAttribute("width",this.fond.getAttribute("width")-(20+this.cases[i].width)); // diminuer la taille du fond
this.cases.splice(i,1); // suppression de la case du tableau
for(var num=i;num<this.cases.length;num++) { // décalage des autres cases
document.getElementById("strip-"+this.id+"-case-"+this.cases[num].num).setAttribute("id","strip-"+this.id+"-case-"+num);
this.cases[num].num--;
}
if(this.cases.length <= 0) this.clear(); // s'il n'y a plus de cases, on supprime le strip.
}
this.draw = function() {
var x = 0;
this.noeud.setAttribute("transform", "translate("+this.x+","+this.y+")");
var noeud_fond = document.createElementNS(svgNS, "rect");
noeud_fond.setAttribute("height",this.height+40);
this.noeud.appendChild(noeud_fond);
this.fond = noeud_fond;
noeud_fond.setAttribute("style","fill:rgb(202,225,232);stroke-width:10;stroke:rgb(151,176,183)");
noeud_fond.setAttribute("x",-10);
noeud_fond.setAttribute("y",-10);
noeud_fond.setAttribute("opacity",0);
for(this.i=0;this.i < this.cases.length;this.i++) {
this.noeud.appendChild(this.cases[this.i].getNoeud(this.height,x));
x += 20 + this.cases[this.i].width;
}
noeud_fond.setAttribute("width",x);
var noeud_outils = document.createElementNS(svgNS, "g");
noeud_outils.setAttribute("transform","translate(0,"+(this.height+10)+")");
var noeud_clear = document.createElementNS(svgNS, "use");
noeud_clear.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href", "#croix");
noeud_clear.setAttribute("onclick","javascript:this.strip.clear();");
noeud_clear.setAttribute("transform","translate(-10,-10)");
noeud_clear.strip = this;
var noeud_actualiser = document.createElementNS(svgNS, "use");
noeud_actualiser.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href", "#actualiser");
noeud_actualiser.setAttribute("onclick","javascript:this.strip.redraw();");
noeud_actualiser.setAttribute("transform","translate(15)");
noeud_actualiser.strip = this;
var noeud_sauver = document.createElementNS(svgNS, "use");
noeud_sauver.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href", "#sauver");
noeud_sauver.setAttribute("onclick","javascript:document.getElementById('xml_area').value = this.strip.getXML();");
noeud_sauver.setAttribute("transform","translate(30)");
noeud_sauver.strip = this;
noeud_outils.style.visibility = 'hidden';
noeud_outils.appendChild(noeud_clear);
noeud_outils.appendChild(noeud_actualiser);
noeud_outils.appendChild(noeud_sauver);
this.noeud.appendChild(noeud_outils);
this.noeud.setAttribute("onmouseover","javascript:if(this.in!='in') { this.noeud_outils.style.visibility = 'visible';this.noeud_fond.setAttribute('opacity',100);this.in='in'}");
this.noeud.setAttribute("onmouseout","javascript:this.noeud_outils.style.visibility = 'hidden';this.noeud_fond.setAttribute('opacity',0);this.in='out'");
this.noeud.noeud_outils = noeud_outils;
this.noeud.noeud_fond = noeud_fond;
}
this.clear = function() {
while (this.noeud.firstChild) this.noeud.removeChild(this.noeud.firstChild);
}
this.redraw = function() {
this.clear();
this.draw();
}
this.genXML = function() {
document.implementation.createDocument("", "strip", null);
}
this.getXML = function() {
var xml = "<strip x=\""+this.x+"\" y=\""+this.y+"\" height=\""+this.height+"\">\n";
for(var i=0;i < this.cases.length;i++) {
xml += this.cases[i].getXML("\t");
}
xml += "</strip>\n";
return xml;
}
}
function chargerURL(url) {
alert("c'est parti...");
strip = parseStrip(url);
strip.draw();
alert("voilà");
}
/*var strip = new Strip("strip",10,100,480,true);
case1 = new Case(0,600,"");
perso = new Perso("gnu.svg#layer1",0,103,"gauche");
bulle = new Bulle(150,10,"coucou les amis",100,20);
perso.ajouterBulle(bulle);
case1.ajouterPerso(perso);
case2 = new Case(1,600,"");
strip.ajouterCase(case1);
strip.ajouterCase(case2);
strip.draw();
alert(strip.getXML());
strip.supprimerCase(0);
strip.clear();
strip.draw();*/
function parseStrip(xmlFile) {
var xmlDoc;
xmlDoc=new window.XMLHttpRequest();
xmlDoc.open("GET",xmlFile,false);
xmlDoc.send("");
for(i=0;xmlDoc.responseXML.childNodes[i].nodeType != 1;i++);
strip_node = xmlDoc.responseXML.childNodes[i];
//alert(strip_node.textContent);
strip = new Strip("strip",strip_node.getAttribute("x"),strip_node.getAttribute("y"),strip_node.getAttribute("height"),true);
strip.clear();
num = 0;
for(i=0;case_node = strip_node.childNodes[i];i++) {
if(case_node.nodeName == "case") {
kase = new Case(num,case_node.getAttribute("width"),case_node.getAttribute("fond")); //on peut pas utiliser "case" donc j'utilise "kase"
num++;
for(j=0;perso_node = case_node.childNodes[j];j++) {
if(perso_node.nodeName == "personnage") {
perso = new Perso(perso_node.getAttribute("url"),perso_node.getAttribute("x"),perso_node.getAttribute("y"),perso_node.getAttribute("pos"));
for(k=0;bulle_node = perso_node.childNodes[k];k++) {
if(bulle_node.nodeName == "bulle") {
bulle = new Bulle(bulle_node.getAttribute("x"),bulle_node.getAttribute("y"),bulle_node.textContent,bulle_node.getAttribute("width"),bulle_node.getAttribute("size"));
perso.ajouterBulle(bulle);
}
}
kase.ajouterPerso(perso);
} else if(perso_node.nodeName == "bulle") {
bulle = new Bulle(perso_node.getAttribute("x"),perso_node.getAttribute("y"),perso_node.textContent,perso_node.getAttribute("width"),perso_node.getAttribute("size"));
kase.ajouterBulle(bulle);
}
}
strip.ajouterCase(kase);
}
}
return strip;
}
//strip = parseStrip("geekscottes_133.xml");
//strip.draw();
//TODO
//ajouter des appels de fonctions permettant de modifier le strip actif (texte des bulles, positions, ...)
//ajouter l'interface graphique pour agir sur ces fonctions
//penser à ajouter du drag and drop
//normaliser les id des objets : strip-iddustrip-case-idcase-bulle-idbulle, ... => DONE je crois
//tout faire pour pouvoir gérer plusieurs strip éditables ou non
//flip du perso si demandé => fait mais à améliorer
//perso composé => postponed
//pouvoir modifier un élément du strip et actualiser l'affichage => replaceChild
//faire des fonctions générant un fichier xml
//avoir des valeurs par défaut pour certains arguments (coté xml => à tester => NE MARCHE PAS) + coté javascript, placement des bulles et des persos
//faire un DTD pour le xml => DONE
//faire l'éditeur :
//ajouter du cliquer glisser
//ajouter/éditer bulles et perso
]]>
</script>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 22 KiB