Масштабирование SVG
Написал код для изменения размера элемента. При нажатии на значок системы, снизу появляется треугольничек, за который если потянуть, то можно изменять размер изображения. Есть две большие проблемы.
1) В качестве изображения сейчас стоит png с огромным объемом. Хочу сделать svg. Но если его масштабировать таким образом, то он масштабируется пропорционально. Зато сами края изображения увеличиваются в любую сторону. Треугольник у меня привязан к правому нижнему краю изображения, следовательно он уплывает, когда трансформация идет непропорциональная. 2) Если после первого трансформирования тыкнуть в любое место окна, то изображение растянется до этого места. Никак не могу исправить проблему. <html> <head> <style> body { margin: 0; } #draw { position: absolute; background-color: transparent; z-index: 0; } table { position: absolute; right: 15%; } #grid { position: absolute; background-color: transparent; z-index: 1; } </style> <canvas id='draw' width='600' height='400' style='border:1px solid'></canvas> <canvas id='grid' width='600' height='400' style='border:1px solid'></canvas> <script type='text/javascript'> window.onload = function(e){ var canvas=document.getElementById("draw"); var can=canvas.getContext("2d"); var grid = document.getElementById("grid"); var canGr = grid.getContext("2d"); var icoSystem=document.createElement("img"); var sizeTr=document.createElement("img"); var testBool = false; var sizeTrCreate = false; var sizeTrBool = false; var actionList = { icoSystem: function(){ icoSystem.setAttribute("src","icoSystem.png"); icoSystem.style.height = 220 + 'px'; document.body.appendChild(icoSystem); icoSystem.style.position = "absolute"; icoSystem.style.zIndex = 2; }, }; icoSystem.onmouseover = function(){ icoSystem.style.cursor = "move"; } sizeTr.onmousedown = function(event){ sizeTrBool = true; width = icoSystem.offsetWidth; height = icoSystem.offsetHeight; xDown = event.pageX; yDown = event.pageY; offsetXSizeTr = xDown - sizeTr.x; offsetYSizeTr = yDown - sizeTr.y; } icoSystem.onmousedown = function(){ if(sizeTrCreate == false){ sizeTr.setAttribute("src","sizeTr.svg"); sizeTr.style.position = "absolute"; sizeTr.style.zIndex = parseInt(icoSystem.style.zIndex,10)+1; sizeTr.style.left = icoSystem.x + icoSystem.width - 20; sizeTr.style.top = icoSystem.y + icoSystem.height - 20; sizeTr.style.width = 20 + 'px'; document.body.appendChild(sizeTr); sizeTrCreate = true; } } //offsetX = event.pageX - icoSystem.x; //offsetY = event.pageY - icoSystem.y; sizeTr.onmouseover = function(){ sizeTr.style.cursor = "NW-resize"; } document.onmousemove = function(event){ xMove = event.pageX; yMove = event.pageY; if(sizeTrBool == true){ icoSystem.style.width = width + xMove - xDown; icoSystem.style.height = height + yMove - yDown; sizeTr.style.left = xMove - offsetXSizeTr + 'px'; sizeTr.style.top = yMove - offsetYSizeTr + 'px'; } } document.onmouseup = function(event){ xUp = event.pageX; yUp = event.pageY; sizeTrBool = false; icoSystem.style.width = width + xUp - xDown; icoSystem.style.height = height + yUp - yDown; sizeTr.style.left = xUp - offsetXSizeTr + 'px'; sizeTr.style.top = yUp - offsetYSizeTr + 'px'; } sizeTr.ondragstart = function(){return false;} icoSystem.ondragstart = function(){return false;} document.onclick = function(event){ if(event.target.tagName == 'BUTTON'){ actionList[event.target.getAttribute('id')](); } } } </script> <title> </title> </head> <body> <br> <table border="0"> <tr> <td><button id="icoSystem">Система</button></td> </tr> </table> </table> </body> </html> |
Часовой пояс GMT +3, время: 13:57. |