일부 HTML 태그와 함께 Raphael.js를 사용하여 클릭 이벤트를 통해 생성되는 시리즈 또는 서클의 정보를 업데이트하려고합니다. 생성 될 때 생성 된 html은 X, Y 및 반경의 위치와 함께 원의 정보를 유지합니다. 원을 이동하거나 크기를 변경할 때 동적으로 변경 될 수 있습니다.이 JSFiddle은이를 더 명확하게 보여줍니다.
http://jsfiddle.net/mauricioSanchez/L4mAL/
내 이벤트 리스너가 있습니다.
canvasHandler.mouseup(function (e) {
var mouseX = e.offsetX;
var mouseY = e.offsetY;
if (circlePickerSelector) {
makeCircle(mouseX, mouseY);
circlePickerSelector = false;
}
});
circlePicker.click(function () {
circlePickerSelector = !circlePickerSelector;
});
이것은 첫 번째 eventListener에서 호출되는 주요 함수입니다. 이를 위해 원과 HTML 요소를 생성합니다.
function makeCircle(mouseX, mouseY) {
//We call it before our circles are dragged so that their array is waiting to store the information
// addingArrays(circleCounter);
var radius;
var fill;
var circle = canvas.circle(mouseX, mouseY, 50).attr({
fill: "hsb(.8, 1, 1)",
stroke: "none",
opacity: .5,
});
// console.log(circles);
// We add an ID and a class to the circle
var ourCircle = $("circle").last();
ourCircle.attr("class", circleCounter);
// And then finally push it to our array of circles
circles.push(circle);
var handlerPos = [mouseX + 35, mouseY + 35];
var s = canvas.circle(handlerPos[0], handlerPos[1], 10).attr({
fill: "hsb(.8, .5, .5)",
stroke: "none",
opacity: .5
});
//We add an id and a class to our little circle.
s.node.id = sizerCounter;
var sizerClass = $('circle').last();
sizerClass.attr("class", "main-circle sizer");
var newSizerClass = $(".sizer");
// console.log(s);
s.hide();
//We now assign a handler for each little circle added and a main circle in order to hide them
var circleClass = $("." + String(circleCounter));
var sizerID = $("#" + String(sizerCounter));
circleClass.mouseenter(function () {
sizerID.toggle();
});
circleClass.mouseleave(function () {
sizerID.hide();
});
sizerID.mouseenter(function () {
$(this).toggle();
});
sizerID.mouseleave(function () {
$(this).hide();
});
// console.log(circleClass);
//We add some resizing and dragging properties
var start = function () {
//storing original coordinates
this.ox = this.attr("cx");
this.oy = this.attr("cy");
this.sizer.ox = this.sizer.attr("cx");
this.sizer.oy = this.sizer.attr("cy")
this.attr({
opacity: 1
});
this.sizer.attr({
opacity: 1
});
}, move = function (dx, dy) {
// move will be called with dx and dy
this.attr({
cx: this.ox + dx,
cy: this.oy + dy
});
this.sizer.attr({
cx: this.sizer.ox + dx,
cy: this.sizer.oy + dy
});
//This is the key function to change
updateModel(this.attrs.cx, this.attrs.cy, this.node.className.baseVal, this.attrs.r);
}, up = function () {
// restoring state
this.attr({
opacity: .5
});
this.sizer.attr({
opacity: .5
});
}, rstart = function () {
// storing original coordinates
this.ox = this.attr("cx");
this.oy = this.attr("cy");
this.big.or = this.big.attr("r");
}, rmove = function (dx, dy) {
// move will be called with dx and dy
this.attr({
cx: this.ox + dy,
cy: this.oy + dy
});
this.big.attr({
r: this.big.or + (dy < 0 ? -1 : 1) * Math.sqrt(2 * dy * dy)
});
updateModel(this.attrs.cx, this.attrs.cy, this.node.className.baseVal, this.attrs.r);
};
circle.drag(move, start, up);
circle.sizer = s;
s.drag(rmove, rstart);
s.big = circle;
//Here we create
var myCodeList = $(".code-list");
var htmlString = "<li class='" + circleCounter + "'> <span class='circle-color'> var color = <div class='circle-color-input' contentEditable autocorrect='off'> type a color</div> ; </span> <br> <span class='circle-radius'> This is a test </span> <br> <span class='circle'> This is a test </span> </li>";
myCodeList.append(htmlString);
updateList();
circleCounter++;
sizerCounter++;
}
마지막으로이 두 함수를 사용하면 html과 원의 위치를 업데이트 할 수 있습니다.
function updateModel(x, y, _class, r) {
var len = circles.length;
for (var i = 0; i < len; i++) {
if (circles[i].node.className.baseVal == _class) {
circles[i].attrs.cx = x;
circles[i].attrs.cy = y;
circles[i].attrs.r = r;
}
}
updateList();
}
function updateList() {
//To change that one I have put a class or an id
var listItems = $('.code-list').find('li.' + circleCounter);
// console.log(listItems);
var len = circles.length;
for (var i = 0; i < circles.length; i++) {
//We create one reference. This makes looking for one element more effective. Unless we need to search for a particular element
var currentItem = circles[i];
var updateStringRadius = "var radius = " + parseInt(currentItem.attrs.r) + ";";
var updateStringCircle = "circle (" + currentItem.attrs.cx + " ," + currentItem.attrs.cy + ", radius)";
//This is the div Item for the particular div of each element
var divItem = $(listItems[i]);
var radiusItem = divItem.find("span.circle-radius");
var circleItem = divItem.find("span.circle");
// console.log(currentItem.attrs.cx);
radiusItem.text(updateStringRadius);
console.log($('.circle-radius').html());
circleItem.text(updateStringCircle);
// divItem.text(updateString);
// console.log(divItem);
}
}
예를 들어 JSfiddle을 살펴보고 세 개의 원을 만듭니다. 원이 생성 된 후 첫 번째 정보 만 업데이트되지만 이제 이동하거나 크기를 조정할 때 변경되지 않습니다.
나는 그것을 알아. 그래서 문제는이 함수에있었습니다.
function updateList() {
//To change that one I have put a class or an id
var listItems = $('.code-list').find('li.' + circleCounter);
// console.log(listItems);
var len = circles.length;
for (var i = 0; i < circles.length; i++) {
//We create one reference. This makes looking for one element more effective. Unless we need to search for a particular element
var currentItem = circles[i];
var updateStringRadius = "var radius = " + parseInt(currentItem.attrs.r) + ";";
var updateStringCircle = "circle (" + currentItem.attrs.cx + " ," + currentItem.attrs.cy + ", radius)";
//This is the div Item for the particular div of each element
var divItem = $(listItems[i]);
var radiusItem = divItem.find("span.circle-radius");
var circleItem = divItem.find("span.circle");
// console.log(currentItem.attrs.cx);
radiusItem.text(updateStringRadius);
console.log($('.circle-radius').html());
circleItem.text(updateStringCircle);
// divItem.text(updateString);
// console.log(divItem);
}
}
핸들러를 시작하고 이에 대한 자식을 찾는 방식을 변경했습니다.
function updateList(){
var len = circles.length;
for (var i = 0; i < circles.length; i++) {
var currentItem = circles[i];
var updateStringRadius = "var radius = " + parseInt(currentItem.attrs.r) + ";";
var updateStringCircle = "circle (" + currentItem.attrs.cx + " ," + currentItem.attrs.cy + ", radius)";
var divItem = $('.code-list').find('li.circle-' + (i+1))
var radiusItem = divItem.find("span.circle-radius");
var circleItem = divItem.find("span.circle");
radiusItem.text(updateStringRadius);
circleItem.text(updateStringCircle);
}
요소를 제대로 반복하지 않았습니다. 또한 모범 사례를 위해 class = "1"에서 class = "circle-1"로 클래스를 변경하는 것이 좋습니다.
다음은 JSfiddle입니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다