Develop and Download Open Source Software

iSlideMaker

Browse Subversion Repository

/[islidemaker]/SvgEditor.js

Diff of /SvgEditor.js

Parent Directory Parent Directory | Revision Log Revision Log | View Patch Patch

revision 33 by isao-hara, Sun Jul 25 08:01:54 2010 UTC revision 35 by isao-hara, Mon Jul 26 00:46:07 2010 UTC
# Line 887  function mkColorPalette(){ Line 887  function mkColorPalette(){
887    if(palette.innerHTML) return;    if(palette.innerHTML) return;
888    
889    palette.innerHTML="";    palette.innerHTML="";
   
890    palette.addEventListener("touchstart", onTouchStartColor, false);    palette.addEventListener("touchstart", onTouchStartColor, false);
891    
 //  palette.innerHTML="<select id=\"color_sel\"><option value=\"fill\">Fill</option><option value=\"stroke\">Color</option></select>";  
892    for(var i=0; i<colors.length ;i++){    for(var i=0; i<colors.length ;i++){
893      if(colors[i] == 'none')      if(colors[i] == 'none')
894        palette.innerHTML +="<div class=\"item\" style=\"background-color:"+colors[i]+";\" color-val=\""+colors[i]+"\">X</div>";        palette.innerHTML +="<div class=\"item\" style=\"background-color:"+colors[i]+";\" color-val=\""+colors[i]+"\">X</div>";
# Line 1692  function getSelectedObjects(x1, y1, x2, Line 1690  function getSelectedObjects(x1, y1, x2,
1690  }  }
1691    
1692  function onTouchStartCore(){  function onTouchStartCore(){
1693      if((!modeSVG || modeSVG == 'selector') && selectedItems.length == 0){ // Selector Mode    if((!modeSVG || modeSVG == 'selector') && selectedItems.length == 0){ // Selector Mode
1694        var x1=getPreviewX(sx-1);      var x1=getPreviewX(sx-1);
1695        var y1=getPreviewY(sy-1);      var y1=getPreviewY(sy-1);
1696        var x2=getPreviewX(sx+2);      var x2=getPreviewX(sx+2);
1697        var y2=getPreviewY(sy+2);      var y2=getPreviewY(sy+2);
1698        getSelectedObjects(x1, y1, x2, y2);      getSelectedObjects(x1, y1, x2, y2);
1699              
1700        if(selectedItems.length == 0){      if(selectedItems.length == 0){
1701          setSVGMode('selector');        setSVGMode('selector');
1702        }else if(selectedItems.length == 1){      }else if(selectedItems.length == 1){
1703          targetItem=selectedItems[0];        targetItem=selectedItems[0];
1704          setSVGMode(getElementTag(targetItem));        setSVGMode(getElementTag(targetItem));
1705        }else{      }else{
1706          setSVGMode('Group');        setSVGMode('Group');
1707        }      }
1708     }else { // CreateMode   }else { // CreateMode
1709       if(selectedItems.length == 0){     if(selectedItems.length == 0){
1710    
1711         var fill=document.getElementById('svg_fill');       var fill=document.getElementById('svg_fill');
1712         var color=document.getElementById('svg_color');       var color=document.getElementById('svg_color');
1713         var L=document.getElementById('svg_stroke');       var L=document.getElementById('svg_stroke');
1714    
1715         var x = getPreviewX(sx);       var x = getPreviewX(sx);
1716         var y = getPreviewY(sy);       var y = getPreviewY(sy);
1717    
1718         switch(modeSVG){       switch(modeSVG){
1719           case 'text':         case 'text':
1720             var txt=document.getElementById('svg_text');           var txt=document.getElementById('svg_text');
1721             var size=document.getElementById('svg_size');           var size=document.getElementById('svg_size');
1722             if(txt.value){           if(txt.value){
1723                 y = y + parseInt(size.value)*0.8;               y = y + parseInt(size.value)*0.8;
1724                 targetItem=createSVGText(txt.value, x, y, size.value, color.value);               targetItem=createSVGText(txt.value, x, y, size.value, color.value);
1725             }else{           }else{
1726                putInputForm(x, y, txt.value, size.value);              putInputForm(x, y, txt.value, size.value);
1727             }           }
1728             break;           break;
1729           case 'rect':         case 'rect':
1730             var attr = 'x='+x+',y='+y+',width='+svg_width+',height='+svg_height;           var attr = 'x='+x+',y='+y+',width='+svg_width+',height='+svg_height;
1731             targetItem=createSVGObj(modeSVG,attr, fill.value, color.value, L.value);           targetItem=createSVGObj(modeSVG,attr, fill.value, color.value, L.value);
1732             break;           break;
1733           case 'circle':         case 'circle':
1734             var attr = 'cx='+x+',cy='+y+',r='+svg_rx;           var attr = 'cx='+x+',cy='+y+',r='+svg_rx;
1735             targetItem=createSVGObj(modeSVG,attr, fill.value, color.value, L.value);           targetItem=createSVGObj(modeSVG,attr, fill.value, color.value, L.value);
1736             break;           break;
1737           case 'ellipse':         case 'ellipse':
1738             var attr = 'cx='+x+',cy='+y+',rx='+svg_rx+',ry='+svg_ry;           var attr = 'cx='+x+',cy='+y+',rx='+svg_rx+',ry='+svg_ry;
1739             targetItem=createSVGObj(modeSVG,attr, fill.value, color.value, L.value);           targetItem=createSVGObj(modeSVG,attr, fill.value, color.value, L.value);
1740             break;           break;
1741           case 'newPath':         case 'newPath':
1742             var attr = 'd=M '+x+' '+y+' L '+x+' '+y;           var attr = 'd=M '+x+' '+y+' L '+x+' '+y;
1743             targetItem=createSVGObj('path' ,attr, 'none', color.value, L.value);           targetItem=createSVGObj('path' ,attr, 'none', color.value, L.value);
1744             break;           break;
1745           case 'newLine':         case 'newLine':
1746             var x2=x+1;           var x2=x+1;
1747             var attr = 'x1='+x+',y1='+y+',x2='+x2+',y2='+y;           var attr = 'x1='+x+',y1='+y+',x2='+x2+',y2='+y;
1748             targetItem=createSVGObj('line' ,attr, 'none', color.value, L.value);           targetItem=createSVGObj('line' ,attr, 'none', color.value, L.value);
1749             break;           break;
1750           case 'image':         case 'image':
1751             var attr = 'x='+x+',y='+y;           var attr = 'x='+x+',y='+y;
1752             var txt=document.getElementById('svg_text');           var txt=document.getElementById('svg_text');
1753             var w=document.getElementById('svg_w');           var w=document.getElementById('svg_w');
1754             var h=document.getElementById('svg_h');           var h=document.getElementById('svg_h');
1755             if(txt.value) targetItem=createSVGImage(txt.value ,w.value, h.value, attr);           if(txt.value) targetItem=createSVGImage(txt.value ,w.value, h.value, attr);
1756           default:         default:
1757             break;           break;
1758         }       }
1759         if (targetItem){       if (targetItem){
1760           appendSVGObj(targetItem);         appendSVGObj(targetItem);
1761           selectedItems[0]=targetItem;         selectedItems[0]=targetItem;
1762         }       }
1763       }else{     }else{
1764         var x1=getPreviewX(sx-1);       var x1=getPreviewX(sx-1);
1765         var y1=getPreviewY(sy-1);       var y1=getPreviewY(sy-1);
1766         var x2=getPreviewX(sx+2);       var x2=getPreviewX(sx+2);
1767         var y2=getPreviewY(sy+2);       var y2=getPreviewY(sy+2);
1768         if(!checkIntersection(svg_select, x1, y1, x2, y2)){       if(!checkIntersection(svg_select, x1, y1, x2, y2)){
1769            setSVGMode('selector');          setSVGMode('selector');
        }  
1770       }       }
1771     }     }
1772     }
1773  }  }
1774    
1775    
# Line 1907  function clearSelectedItems(){ Line 1905  function clearSelectedItems(){
1905  }  }
1906    
1907  function onTouchMoveCode1(pageX, pageY){  function onTouchMoveCode1(pageX, pageY){
1908      if(targetItem || selectedItems.length > 0){    if(targetItem || selectedItems.length > 0){
1909        switch(modeSVG){      switch(modeSVG){
1910          case 'newPath':        case 'newPath':
1911            if(targetItem.tagName == 'path' ){          if(targetItem.tagName == 'path' ){
1912              var path = targetItem.getAttribute("d");            var path = targetItem.getAttribute("d");
1913              path = path + ' '+ getPreviewX(pageX) + ' '+ getPreviewY(pageY) ;            path = path + ' '+ getPreviewX(pageX) + ' '+ getPreviewY(pageY) ;
1914              targetItem.setAttribute("d",path);            targetItem.setAttribute("d",path);
1915            }          }
1916            break;          break;
1917          case 'newLine':        case 'newLine':
1918            if(targetItem.tagName == 'line' ){          if(targetItem.tagName == 'line' ){
1919              var x2 = getPreviewX(pageX);            var x2 = getPreviewX(pageX);
1920              var y2 = getPreviewY(pageY);            var y2 = getPreviewY(pageY);
1921              targetItem.setAttribute("x2",x2);            targetItem.setAttribute("x2",x2);
1922              targetItem.setAttribute("y2",y2);            targetItem.setAttribute("y2",y2);
1923            }          }
1924            break;          break;
1925          default:
1926          default:          var dx = pageX - sx;
1927            var dx = pageX - sx;          var dy = pageY - sy;
           var dy = pageY - sy;  
1928    
1929            if(selectedItems.length == 1 && getElementTag(selectedItems[0]) == 'line'){          if(selectedItems.length == 1 && getElementTag(selectedItems[0]) == 'line'){
1930              var lx = getPreviewX(pageX);            var lx = getPreviewX(pageX);
1931              var ly = getPreviewY(pageY);            var ly = getPreviewY(pageY);
1932    
1933              if(!lineEdit){            if(!lineEdit){
1934                var x1 = getAttributeVal(selectedItems[0],"x1");              var x1 = getAttributeVal(selectedItems[0],"x1");
1935                var y1 = getAttributeVal(selectedItems[0],"y1");              var y1 = getAttributeVal(selectedItems[0],"y1");
1936                var x2 = getAttributeVal(selectedItems[0],"x2");              var x2 = getAttributeVal(selectedItems[0],"x2");
1937                var y2 = getAttributeVal(selectedItems[0],"y2");              var y2 = getAttributeVal(selectedItems[0],"y2");
1938                var xc = (x1+x2)/2;              var xc = (x1+x2)/2;
1939                var yc = (y1+y2)/2;              var yc = (y1+y2)/2;
1940                var eS = Math.min(Math.abs(x1-lx), Math.abs(y1-ly));              var eS = Math.min(Math.abs(x1-lx), Math.abs(y1-ly));
1941                var eC = Math.min(Math.abs(xc-lx), Math.abs(yc-ly));              var eC = Math.min(Math.abs(xc-lx), Math.abs(yc-ly));
1942                var eE = Math.min(Math.abs(x2-lx), Math.abs(y2-ly));              var eE = Math.min(Math.abs(x2-lx), Math.abs(y2-ly));
1943    
1944                var minVal = Math.min(eS, Math.min(eC, eE));              var minVal = Math.min(eS, Math.min(eC, eE));
1945                if(minVal == eS) lineEdit='start';              if(minVal == eS) lineEdit='start';
1946                else if(minVal == eE) lineEdit='end';              else if(minVal == eE) lineEdit='end';
1947                else lineEdit='move';              else lineEdit='move';
1948              }            }
1949              if(lineEdit=='start'){            if(lineEdit=='start'){
1950                selectedItems[0].setAttribute("x1",lx );              selectedItems[0].setAttribute("x1",lx );
1951                selectedItems[0].setAttribute("y1",ly );              selectedItems[0].setAttribute("y1",ly );
1952                setSelectBox();              setSelectBox();
1953              }else if(lineEdit == 'end'){            }else if(lineEdit == 'end'){
1954                selectedItems[0].setAttribute("x2",lx );              selectedItems[0].setAttribute("x2",lx );
1955                selectedItems[0].setAttribute("y2",ly );              selectedItems[0].setAttribute("y2",ly );
1956                setSelectBox();              setSelectBox();
             }else{  
               selectedItems[0].setAttribute("transform","translate("+dx+","+dy+")");  
               moveSelectedRectangle(dx, dy);  
             }  
1957            }else{            }else{
1958              for(var i=0; i<selectedItems.length;i++){              selectedItems[0].setAttribute("transform","translate("+dx+","+dy+")");
               if(selectedItems[i]) selectedItems[i].setAttribute("transform","translate("+dx+","+dy+")");  
             }  
1959              moveSelectedRectangle(dx, dy);              moveSelectedRectangle(dx, dy);
1960            }            }
1961            break;          }else{
1962        }            for(var i=0; i<selectedItems.length;i++){
1963        updateShowMenu();              if(selectedItems[i]) selectedItems[i].setAttribute("transform","translate("+dx+","+dy+")");
1964      }else if(modeSVG == 'selector'){            }
1965        ex = pageX;            moveSelectedRectangle(dx, dy);
1966        ey = pageY;          }
1967        var x1=sx;          break;
1968        var y1=sy;      }
1969        var x2=ex;      updateShowMenu();
1970        var y2=ey;    }else if(modeSVG == 'selector'){
1971        ex = pageX;
1972        ey = pageY;
1973        var x1=sx;
1974        var y1=sy;
1975        var x2=ex;
1976        var y2=ey;
1977    
1978        if(sx > ex){ x1=ex; x2=sx; }      if(sx > ex){ x1=ex; x2=sx; }
1979        if(sy > ey){ y1=ey; y2=sy; }      if(sy > ey){ y1=ey; y2=sy; }
1980    
1981        selectedRectangle(getPreviewX(x1), getPreviewY(y1), getPreviewX(x2), getPreviewY(y2));      selectedRectangle(getPreviewX(x1), getPreviewY(y1), getPreviewX(x2), getPreviewY(y2));
1982      }    }
1983  }  }
1984    
1985  function svgInputTextExec(e){  function svgInputTextExec(e){
# Line 2085  function onTouchStart(e){ Line 2082  function onTouchStart(e){
2082         editingTextObj.style.display='block';         editingTextObj.style.display='block';
2083         editingTextObj=null;         editingTextObj=null;
2084      }      }
2085        if(dt < 300 ){ onDoubleTap(); }else{ onTouchStartCore(); }
     if(dt < 300 ){  
       onDoubleTap();  
     }else{  
       onTouchStartCore();  
     }  
2086      firstTouch = touchtime;      firstTouch = touchtime;
2087        updateSelectedRectangle();
2088    }    }
   
  updateSelectedRectangle();  
2089  }  }
2090    
2091  function onTouchMove(e){  function onTouchMove(e){
   
2092    if (e.touches.length == 1){    if (e.touches.length == 1){
2093      e.preventDefault();      e.preventDefault();
2094      onTouchMoveCode1(e.touches[0].pageX, e.touches[0].pageY);      onTouchMoveCode1(e.touches[0].pageX, e.touches[0].pageY);
2095    }else if (e.touches.length == 2){    }else if (e.touches.length == 2){
2096      e.preventDefault();      if(selectedItems.length == 1){
2097      var dx = e.touches[0].pageX-e.touches[1].pageX;        e.preventDefault();
2098      var dy = e.touches[0].pageY-e.touches[1].pageY;        var dx = e.touches[0].pageX-e.touches[1].pageX;
2099      var th = Math.abs(Math.atan2(dy , dx)/Math.PI *180);        var dy = e.touches[0].pageY-e.touches[1].pageY;
2100          var th = Math.abs(Math.atan2(dy , dx)/Math.PI *180);
2101      if(th > 165 ||  th < 25) svg_scale_dir = 'x';  
2102      else if(th > 65 &&  th < 115) svg_scale_dir = 'y';        if(th > 165 ||  th < 25) svg_scale_dir = 'x';
2103      else svg_scale_dir = null;        else if(th > 65 &&  th < 115) svg_scale_dir = 'y';
2104          else svg_scale_dir = null;
2105        }
2106    }    }
2107  }  }
2108    
Legend:
Removed from v.33  
changed lines
  Added in v.35
Back to OSDN">Back to OSDN
 ViewVC Help
Powered by ViewVC 1.1.26  
About OSDN
Find Software
Develop Software
Help