1
두 번째 업데이트 : 처음부터 경로와 원을 포함하면 (하드 코드) 모든 것이 작동합니다. jquery가 dom을 업데이트하지 않는 이유는 무엇입니까?표시 줄 끝에있는 svg 줄 가져 오기
업데이트 : 실제 코드에서 작성한 모든 것이 없기 때문에 예제를 확인해야한다는 것을 알게되었습니다.
끝에 svg 행을 그려서 JavaScript 객체에 위치를 기록하려고합니다. 그러나 나는 이미지를 표시하는 데 약간의 어려움을 겪고 있는데, 이유에 대해서는 당황 스럽다. 관련된 방화범이나 크롬 메시지가 나타나지 않는다. 여기 내 코드입니다 : 여기
가 업데이트 코드<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>demo</title>
<style>
input{
border: none;
background: inherit;
}
body{
font-family: Courier New;
}
.point{
width: 10px;
height: 10px;
border:0px solid;
border-radius:5px;
background: #000099;
z-index: 9999;
}
#drawnLine{
}
.identification{
position: absolute;
background: #ddd;
width: 200px;
z-index: 9888;
top:0;
left:0;
}
#subjectImage{
margin: auto;
height: 100%;
display: block;
z-index: 1;
}
</style>
</head>
<body>
<svg id="drawing" xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:2">
</svg>
<button class="identification" onmousedown="drawLine(this)" id="tests" >test</button>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
var zindexParts = 100;
var mouseDX = 0;
var mouseDY = 0;
var part = {
id: 'Ganglion',
name: {
location: {
x: 0, y: 0, z: 0
}
},
line: {
stroke: "blue",
strokewidth: "3",
beginning: {
x: 0, y: 0, z: 0,
circle: {
cx: 0,
cy: 0,
r: 5
}
},
end: {
x: 0, y: 0, z: 0,
circle: {
cx: 0,
cy: 0,
r: 5
}
}
}
};
function drawLine(line) {
$(line).mousedown(function(e) {
part.line.beginning.x = $(this).position().left + ($(this).width()/2);
part.line.beginning.y = $(this).position().top + ($(this).height()/2);
$('body').mousemove(function(ee) {
part.line.end.circle.cx = ee.pageX;
part.line.end.circle.cy = ee.pageY;
part.line.end.x = ee.pageX;
part.line.end.y = ee.pageY;
$('#' + part.id + 'Circle').attr({cx: part.line.end.circle.cx, cy: part.line.end.circle.cy});
$('#' + part.id + 'Line').attr('d', 'M ' + part.line.beginning.x + ' ' + part.line.beginning.y + ' L ' + part.line.end.x + ' ' + part.line.end.y);
});
});
}
$(function() {
$(".draggable").draggable();
$('body').mouseup(function(e) {
$('body').off('mousemove');
});
$('#drawing').append('<path id="' + part.id + 'Line" class="drawnLine" style="z-index:' + zindexParts++ + '" d="M 0 0 L 0 0" stroke="blue" stroke-width="3"/><circle id="' + part.id + 'Circle" class="point draggable ui-widget-content"style="z-index:' + zindexParts++ + '" cx="-999" cy="-999" r="' + part.line.end.circle.r + '" />');
});
</script>
</body>
</html>
하고 여기에 테스트 버튼을 클릭의 DOM 결과 :
<svg id="drawing" xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:100%; height:100%; top:0; left:0; z-index:2">
<path id="GanglionLine" class="drawnLine" style="z-index:100" d="M 0 0 L 0 0" stroke="blue" stroke-width="3"></path>
<circle id="GanglionCircle" class="point draggable ui-widget-content" style="z-index:101" cx="9" cy="9" r="5"></circle>
</svg>
DOM에 line 요소와 th circle을 실제로 만드는 코드는 어디에 있습니까? –