Question

我最近开始学习javascript。现在我有一个任务......而且它似乎比我更多。

我需要构建一个图形编辑器，它可以在图像上添加一个矩形，可以修改（移动边框）。

到目前为止我得到的是开始时的getXY位置，以及结束，img的ID ...就是这样。

<html>
<head>

<script type="text/javascript">
window.onload = init;
function init() {
  if (window.Event) {
    document.captureEvents(Event.MOUSEMOVE);
  }
  document.onclick = getXY;
}


function getXY(e) {
  x = (window.Event) ? e.pageX : event.clientX;
  y = (window.Event) ? e.pageY : event.clientY;

    document.getElementById(document.getElementById('position1').value === '' ? 'position1' : 'position2').value = x+":"+y;

}

function getID(oObject) 
{
    var id = oObject.id;
    document.position.gei.value = id;

}

function markIt()
{
var mark = document.createElement('div');
    mark.id = 'mark';
    mark.style.background = '#fff';
    document.getElementById('wrapper').appendChild('mark');
}

</script>

</head>
<body>
<div id="kontener">
<form name="position">
    <input name="position1" id="position1" type="text" /><input name="position2" id="position2" type="text" /><input name="gei" type="text" id="getElementId" />
    </form>
<div id="wrapper"><img src="ferrari_01.jpg" width="1000" height="650" ismap="ismap" id="ferrari" onclick="getID(this);markIt(mark);"/></div>
<div id="wrapper"><img src="peugeot.jpg" width="100" height="100" id="peugeot" onclick="getID(this);"/></div>
</div>
</body>
</html>

如何创建简单的图形编辑器？

0 个答案: