API tools faq
paste
Advertisement
mrk1989

svg

mrk1989
Nov 10th, 2014
226
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 21.06 KB | None | 0 0
raw download clone embed print report
  1.  
  2.  
  3. <!DOCTYPE html>
  4. <html>
  5.  
  6. <head>
  7.  
  8. <meta charset="UTF-8">
  9. <title>SVG</title>
  10. <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  11. </head>
  12. <body>
  13. <div class="col-lg-12">
  14. <div class="nav" data-name="layers">
  15. Layers
  16. </div>
  17. <div class="nav" data-name="tools">
  18. Tools
  19. </div>
  20. <div class="nav" data-name="brush">
  21. Brush
  22. </div>
  23. <div class="layers" style="display: none;">
  24. <div>
  25. Test Layer
  26. </div>
  27. <div>
  28. Test Layer 2
  29. </div>
  30. <div class="add-layer">
  31. Add a layer
  32. </div>
  33. </div>
  34. <div class="tools" style="display: none;">
  35. <div>
  36. Draw Rectangle
  37. </div>
  38. <div>
  39. Fill Shape
  40. </div>
  41. </div>
  42. <div class="brush" style="display: none;">
  43. <div>
  44. Stroke Color
  45. </div>
  46. <div>
  47. Stroke Width
  48. </div>
  49. <div>
  50. Stroke Pattern
  51. </div>
  52. <div>
  53. Fill Color
  54. </div>
  55. </div>
  56. </div>
  57. <div class="col-lg-12">
  58. <div class="mixSize" id="svgCanvas">
  59.  
  60. <svg id="svgCanvasVisible" class="svg-editor" width="4096" height="3072" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  61.  
  62. </svg>
  63. </div>
  64. <div>
  65. <div>
  66. <h3>current layer to edit : </h3>
  67. <select name="editLayerSelect" id="editLayerSelect">
  68. </select>
  69. </div>
  70. <div>
  71. <h3>add a layer : </h3>
  72. <input type="text" name="newLayerName" value="" id="newLayerName"/><label class="btn btn-success" id="addALayer">Create</label>
  73. </div>
  74. <div>
  75. <h3>display layers : </h3>
  76. <div id="displayCheckboxes">
  77. <label for="layerDisplay"><input class="layerDisplayCheckbox" type="checkbox" value="layer1" name="layerDisplay" checked/>Layer 1</label>
  78. <label for="layerDisplay"><input class="layerDisplayCheckbox" type="checkbox" value="layer2" name="layerDisplay" checked/>Layer 2</label>
  79. </div>
  80. </div>
  81. <div>
  82. <h3>draw : </h3>
  83. <label class="buttonCreate btn btn-success" id="drawLine">Draw Line</label>
  84. <label class="buttonCreate btn btn-warning" id="drawEllipse">Draw Ellipse</label>
  85. <label class="buttonCreate btn btn-info" id="drawRect">Draw Rectangle</label>
  86. <label class="buttonCreate btn btn-danger" id="addText">Add some text</label>
  87. <label>Color : </label><input type="color" name="colorPick"/>
  88. </div>
  89. <div>
  90. <h3>Drag & drop items : </h3>
  91. <img src="http://www.ebcdsignaletique.com/upload/la020_0.jpg" style="width:32px;height:32px;"/>
  92. <img src="http://www.brandsoftheworld.com/sites/default/files/styles/logo-thumbnail/public/0024/9368/brand.gif" style="width:32px;height:32px;"/>
  93. </div>
  94. </div>
  95. </div>
  96. <style>
  97. svg.svg-editor{
  98. border: 1px dashed black;
  99. margin: auto;
  100. margin-top: 50px;
  101. display: block;
  102. position: relative;
  103. top: 50%;
  104.  
  105. }
  106.  
  107. svg.rectangle{
  108. cursor: crosshair;
  109. }
  110.  
  111. .tool>g>*{
  112. fill: #F5F5F5;
  113. stroke: rgb(255,181,181);
  114. }
  115.  
  116. g *:hover{
  117. stroke: rgb(181,181,255);
  118. fill: rgb(255,255,181);
  119. }
  120.  
  121. @import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700);
  122.  
  123. .nav{
  124. width: 80px;
  125. padding-top: 4px;
  126. padding-bottom: 4px;
  127. width: 80px;
  128. text-align: center;
  129. color: #F1F1F1;
  130. font-family: 'Open Sans', sans-serif;
  131. background-color: rgb(20, 20, 20);
  132. transition:all ease 0.5s;
  133. display: inline-block;
  134. }
  135.  
  136. .nav:hover{
  137. background-color: #B84E51;
  138. cursor: pointer;
  139. }
  140.  
  141. .layers, .tools, .brush{
  142. width: 240px;
  143. max-height: 300px;
  144. background-color: rgb(50, 50, 50);
  145. position: fixed;
  146. z-index: 100;
  147. overflow: scroll;
  148. display: none;
  149. }
  150.  
  151. .layers>div, .tools>div, .brush>div{
  152. padding-top: 8px;
  153. padding-bottom: 8px;
  154. text-indent: 1em;
  155. width: 100%;
  156. color: #F1F1F1;
  157. font-family: 'Open Sans', sans-serif;
  158. border-bottom: 1px solid rgb(20, 20, 20);
  159. font-size: 0.8em;
  160. cursor: pointer;
  161. transition:all ease 0.5s;
  162. }
  163.  
  164. .layers>div:hover, .tools>div:hover, .brush>div:hover{
  165. background-color: rgb(35, 35, 35);
  166. }
  167.  
  168. .layers>div:last-child{
  169. position: relative;
  170. bottom: 0;
  171. padding-top: 8px;
  172. padding-bottom: 8px;
  173. text-indent: 0;
  174. width: 100%;
  175. text-align: center;
  176. color: #F1F1F1;
  177. font-family: 'Open Sans', sans-serif;
  178. font-size: 0.8em;
  179. background-color: #B84E51;
  180. cursor: pointer;
  181. transition:all ease 0.5s;
  182. }
  183.  
  184. .layers>div:last-child:hover{
  185. background-color: #973c3f;
  186. }
  187.  
  188. body, html{
  189. width: 100%;
  190. height: 100%;
  191. margin: 0;
  192. background-color: #F5F5F5;
  193. }
  194.  
  195. ::-webkit-scrollbar{
  196. width: 2px;
  197. height: 2px;
  198. }
  199.  
  200. ::-webkit-scrollbar-thumb{
  201. background-color: #B84E51;
  202. }
  203.  
  204. ::-webkit-scrollbar-track{
  205. background-color: rgb(50, 50, 50);
  206. -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.1);
  207. }
  208.  
  209. ::-webkit-scrollbar-thumb:hover{
  210. -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3);
  211. }
  212. </style>
  213. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
  214. <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js" type="text/javascript"></script>
  215.  
  216. <script>
  217. function SVG_Editor(Element){
  218. var element, layers, activeLayer, brushes, activeBrush, tools, activeTool;
  219. var xpos, ypos;
  220. element = Element;
  221. layers = [];
  222. brushes = [];
  223. tools = [];
  224.  
  225. this.addLayer = function(name){
  226. var layer = new Layer(name);
  227. element.appendChild(layer.getElement());
  228. layers.push(layer);
  229. activeLayer = layer;
  230. return layer;
  231. };
  232.  
  233. this.removeLayer = function(index){
  234. element.removeChild(layer[index].getElement());
  235. layers = layers.splice(index, 1);
  236. };
  237.  
  238. this.getLayer = function(index){
  239. return layers[index];
  240. };
  241.  
  242. this.getLayers = function(){
  243. return layers;
  244. };
  245.  
  246. this.addBrush = function(brush){
  247. brushes.push(brush);
  248. };
  249.  
  250. this.getBrushes = function(){
  251. return brushes;
  252. };
  253.  
  254. this.addTool = function(tool){
  255. tools.push(tool);
  256. };
  257.  
  258. this.getTools = function(){
  259. return tools;
  260. };
  261.  
  262. this.getActiveTool = function(){
  263. return activeTool;
  264. };
  265.  
  266. this.getActiveBrush = function(){
  267. return activeBrush;
  268. };
  269.  
  270. this.getActiveLayer = function(){
  271. return activeLayer;
  272. };
  273.  
  274. this.elementSearch = function(search){
  275. for(i in layers){
  276. var shapes = layers[i].getShapes();
  277. for(j in shapes){
  278. if(shapes[j].getElement() === search){
  279. return shapes[j];
  280. }
  281. }
  282. }
  283. return false;
  284. }
  285.  
  286. this.addBrush(new DefaultBrush());
  287. this.addTool(new DrawRectangle());
  288. this.addTool(new PaintBucket());
  289.  
  290. activeBrush = this.getBrushes()[0];
  291. activeTool = this.getTools()[0];
  292.  
  293. var self = this;
  294. element.addEventListener("click", function(event){
  295. if(self.getActiveTool().requiresElement()){
  296. var element = self.elementSearch(event.path[0]);
  297. self.getActiveTool().click(event, element);
  298. }else{
  299. self.getActiveTool().click(event, self.getActiveLayer(), self.getActiveBrush(), this);
  300. }
  301. });
  302. }
  303.  
  304. function Layer(Name){
  305. var name, shapes, element;
  306. shapes = [];
  307.  
  308. this.setName = function(Name){
  309. name = new LayerName(Name);
  310. };
  311.  
  312. this.getElement = function(){
  313. return element;
  314. };
  315.  
  316. this.addShape = function(shape, brush){
  317. shapes.push(shape);
  318. shape.draw(brush);
  319. element.appendChild(shape.getElement());
  320. return shape;
  321. };
  322.  
  323. this.removeShape = function(index){
  324. element.removeChild(shapes[index].getElement());
  325. shapes = shapes.splice(index, 1);
  326. };
  327.  
  328. this.getShapes = function(){
  329. return shapes;
  330. }
  331.  
  332. this.setName(Name);
  333. createElement();
  334.  
  335. function createElement(){
  336. element = document.createElementNS("http://www.w3.org/2000/svg", "g");
  337. element.classList.add("svg-editor-layer");
  338. element.setAttribute("name", name.getNormalizedName());
  339.  
  340. var title = document.createElementNS("http://www.w3.org/2000/svg", "title");
  341. title.textContent = name.getName();
  342.  
  343. element.appendChild(title);
  344. }
  345. }
  346.  
  347. function Rectangle(X, Y, W, H){
  348. var element, width, height;
  349. var position = new Position(X, Y);
  350.  
  351. this.getPosition = function(){
  352. return position;
  353. };
  354.  
  355. this.setPosition = function(X, Y){
  356. position.setX(X);
  357. position.setY(Y);
  358. element.setAttributeNS(null, "x", X);
  359. element.setAttributeNS(null, "y", Y);
  360. };
  361.  
  362. this.setDimensions = function(W, H){
  363. width = W;
  364. height = H;
  365. element.setAttributeNS(null, "width", width);
  366. element.setAttributeNS(null, "height", height);
  367. };
  368.  
  369. this.draw = function(brush){
  370. element.setAttributeNS(null, "stroke-width", brush.getStrokeWidth());
  371. element.setAttributeNS(null, "stroke", brush.getStroke());
  372. element.setAttributeNS(null, "fill", brush.getFill());
  373. };
  374.  
  375. this.getElement = function(){
  376. return element;
  377. };
  378.  
  379. createElement();
  380. this.setDimensions(W, H);
  381. this.setPosition(position.getX(), position.getY());
  382.  
  383. function createElement(){
  384. element = document.createElementNS("http://www.w3.org/2000/svg", "rect");
  385. }
  386. }
  387.  
  388. function DefaultBrush(){
  389. var stroke = "#000000";
  390. var fill = "#FFFFFF";
  391. var strokeWidth = "5";
  392. var fillOpacity = "0";
  393.  
  394. this.getStroke = function(){
  395. return stroke;
  396. };
  397.  
  398. this.getFill = function(){
  399. return fill;
  400. };
  401.  
  402. this.getStrokeWidth = function(){
  403. return strokeWidth;
  404. };
  405.  
  406. this.getFillOpacity = function(){
  407. return fillOpacity;
  408. };
  409.  
  410. this.setStroke = function(Stroke){
  411. stroke = Stroke;
  412. };
  413.  
  414. this.setFill = function(Fill){
  415. fill = Fill;
  416. };
  417.  
  418. this.setFillOpacity = function(Opacity){
  419. fillOpacity = Opacity;
  420. }
  421.  
  422. this.setStrokeWidth = function(StrokeWidth){
  423. strokeWidth = StrokeWidth;
  424. };
  425. }
  426. // function GetEventX(event e){
  427. // return e.hasOwnProperty('offsetX') ? e.offsetX : e.layerX;
  428. //
  429. // // return (e.offsetX || e.clientX - $(e.target).offset().left);
  430. // }
  431. // function GetEventY(e){
  432. // return e.hasOwnProperty('offsetX') ? e.offsetY : e.layerY;
  433. // // ypos = ev.offsetY === undefined ? event.originalEvent.layerY : event.offsetY;
  434. // }
  435. function DrawRectangle(){
  436. var clicks = 0;
  437. var rectangle;
  438.  
  439. this.click = function(event, layer, brush, svg){
  440. svg.classList.toggle("rectangle");
  441. svg.classList.toggle("tool");
  442. if(clicks % 2 === 0){
  443. rectangle = new Rectangle(event.hasOwnProperty('offsetX') ? event.layerX :event.offsetX ,event.hasOwnProperty('offsetY') ? event.layerY :event.offsetY, 0, 0);
  444. svg.addEventListener("mousemove", resize);
  445. console.log("offset x : "+event.hasOwnProperty('offsetX') ? event.layerX :event.offsetX );
  446. console.log("offset y : "+event.hasOwnProperty('offsetY') ? event.layerY : event.offsetY);
  447. layer.addShape(rectangle, brush);
  448. clicks++;
  449. }else{
  450. svg.removeEventListener("mousemove", resize);
  451. var position = rectangle.getPosition();
  452. console.log("POSITION : "+position);
  453. rectangle.setDimensions(event.hasOwnProperty('offsetX') ? event.layerX :event.offsetX - position.getX(), event.hasOwnProperty('offsetY') ? event.layerY :event.offsetY - position.getY());
  454. console.log("event offset x : "+event.hasOwnProperty('offsetX') ? event.layerX :event.offsetX);
  455. console.log("event offset y : "+event.hasOwnProperty('offsetY') ? event.layerY :event.offsetY);
  456. console.log("position : "+position);
  457. console.log("position get x : "+position.getX());
  458. console.log("position get y : "+position.getY());
  459. clicks++;
  460. }
  461. }
  462.  
  463. this.requiresElement = function(){
  464. return false;
  465. }
  466.  
  467. this.getName = function(){
  468. return "Draw Rectangle";
  469. }
  470.  
  471. function resize(event){
  472. var position = rectangle.getPosition();
  473. var x = (event.hasOwnProperty('offsetX') ? event.layerX :event.offsetX)-position.getX();
  474. var y = (event.hasOwnProperty('offsetY') ? event.layerY :event.offsetY)-position.getY();
  475. var lastX = position.getX();
  476. var lastY = position.getY();
  477.  
  478. console.log("actual x : "+x);
  479. console.log("actual y : "+y);
  480.  
  481. if(x<0 || y<0){
  482. var newX = lastX;
  483. var newY = lastY;
  484. var width = rectangle.getWidth();
  485. var height = rectangle.getHeight();
  486. if(x<0){
  487. newX = lastX - x;
  488. width = x;
  489. }
  490. if(y<0){
  491. newY = lastY - y;
  492. height = y;
  493. }
  494. rectangle.setPosition(newX,newY);
  495. rectangle.setDimensions(width,height);
  496. }else{
  497. rectangle.setDimensions((event.hasOwnProperty('offsetX') ? event.layerX :event.offsetX) - position.getX(), (event.hasOwnProperty('offsetY') ? event.layerY :event.offsetY) - position.getY());
  498. }
  499. }
  500. }
  501.  
  502. function PaintBucket(){
  503. var fill;
  504.  
  505. this.setFill = function(Fill){
  506. fill = Fill;
  507. };
  508.  
  509. this.getFill = function(){
  510. return fill;
  511. };
  512.  
  513. this.click = function(event, element){
  514. element.getElement().setAttributeNS(null, "fill", this.getFill());
  515. };
  516.  
  517. this.requiresElement = function(){
  518. return true;
  519. }
  520.  
  521. this.getName = function(){
  522. return "Fill Shape";
  523. }
  524.  
  525. this.setFill("#FF0000");
  526. }
  527.  
  528. function Position(X, Y){
  529. var x = X;
  530. var y = Y;
  531.  
  532. this.getX = function(){
  533. return x;
  534. };
  535.  
  536. this.getY = function(){
  537. return Y;
  538. };
  539.  
  540. this.setX = function(X){
  541. x = X;
  542. };
  543.  
  544. this.setY = function(Y){
  545. y = Y;
  546. };
  547. }
  548.  
  549. function LayerName(Name){
  550. var name = Name;
  551.  
  552. this.getNormalizedName = function(){
  553. return name.replace(/\s+/g, '-').toLowerCase();
  554. };
  555.  
  556. this.getName = function(){
  557. return name;
  558. };
  559. }
  560.  
  561. function Tabs(){
  562. var content = {
  563. "layers": document.getElementsByClassName("layers")[0],
  564. "tools": document.getElementsByClassName("tools")[0],
  565. "brush": document.getElementsByClassName("brush")[0]
  566. };
  567.  
  568. var tabs = {
  569. "layers": document.getElementsByClassName("nav")[0],
  570. "tools": document.getElementsByClassName("nav")[1],
  571. "brush": document.getElementsByClassName("nav")[2]
  572. };
  573.  
  574. for(i in tabs){
  575. var self = this;
  576. tabs[i].dataset.name = i;
  577. tabs[i].addEventListener("click", function(event){
  578. self.show(this.dataset.name);
  579. });
  580. }
  581.  
  582. this.show = function(which){
  583. var hide = content[which].style.display === "block";
  584. for(i in content){
  585. if(i !== "length"){
  586. content[i].style.display = 'none';
  587. }
  588. }
  589. content[which].style.display = hide ? 'none' : 'block';
  590. }
  591. }
  592.  
  593. var editor = new SVG_Editor(document.querySelectorAll("svg.svg-editor")[0]);
  594. var tabs = new Tabs();
  595. var layer1 = editor.addLayer("Test Layer");
  596.  
  597. var standardBrush = editor.getBrushes()[0];
  598.  
  599. var shape1 = new Rectangle(20, 20, 64, 64);
  600. var shape2 = new Rectangle(40, 40, 64, 64);
  601.  
  602. layer1.addShape(shape1, standardBrush);
  603. layer1.addShape(shape2, standardBrush);
  604.  
  605. var layer2 = editor.addLayer("Test Layer 2");
  606. var shape3 = new Rectangle(30, 30, 64, 64);
  607.  
  608. layer2.addShape(shape3, standardBrush);
  609. </script>
  610.  
  611. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!