Написал код для изменения размера элемента. При нажатии на значок системы, снизу появляется треугольничек, за который если потянуть, то можно изменять размер изображения. Есть две большие проблемы.
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>
