Линии от точки к точке за мышкой

[Катринка]

Всем привет.

Подскажите, если не затруднит:

Тема такая.
Нужно нарисовать тест, как в старом добром учебнике - есть фразы слева и фразы справа. И между ними, правильными, человек должен нарисовать линию мышкой. Как будет проверяться правильность- неправильность, это уже отдельный разговор.

Главное - как нарисовать линию, чтобы:

Человек нажимает в одной точке, тянет мышку, линия рисуется, следую за курсором, человек опять нажимает в конечной точке - линия нарисована.

Я так понимаю, что эти точки - начальную и конечную - надо нарисовать тоже, да?

Ну и вопрос - как нарисовать линию, чтоб тянулась за мышшшшью?

Помогите, кто чем может!:rolleyes:

[iNils]

this.move = function () {
this.lineTo (this._xmouse, this._ymouse);
};
this.onMouseDown = function () {
if (!this.flag) {
this.moveTo (this._xmouse, this._ymouse);
this.onMouseMove = this.move;
this.flag = true;
} else {
delete this.onMouseMove;
this.flag = false;
}
};
this.lineStyle (0, 0);

[Катринка]

Вау. Работает. спасибо! А как сделать, чтобы линии были прямые?:rolleyes:

[iNils]

Вау. Работает. спасибо! А как сделать, чтобы линии были прямые?:rolleyes:
Как именно нужно?

[etc]

iNils, начальная и конечная точки и всё :)

[iNils]

iNils, начальная и конечная точки и всё :)Это понятно. Мне интересно, нужно ли водить в процессе псевдо-линию.

[iNils]

Сделал с ней
this.createEmptyMovieClip ("mc", this.getNextHighestDepth ());
this.move = function () {
this.clear ();
this.lineStyle (0, 0, 20);
this.lineTo (this._xmouse, this._ymouse);
};
this.onMouseDown = function () {
if (!this.flag) {
this.moveTo (this._xmouse, this._ymouse);
this.mc._x = this._xmouse;
this.mc._y = this._ymouse;
this.mc.onMouseMove = this.move;
this.flag = true;
} else {
this.mc.clear ();
this.lineTo (this._xmouse, this._ymouse);
delete this.mc.onMouseMove;
this.flag = false;
}
};
this.lineStyle (0, 0);

[Катринка]

iNils, спасибо огроменное!
Теперь все по прямой :)
Теперь осталось придумать, как сделать уже существующие точки, то есть только из них и только в те можно провести линии. Но начало положено :)
Я Ваша должница :)

[iNils]

Теперь осталось придумать, как сделать уже существующие точки, то есть только из них и только в те можно провести линии.
//// функия рисующая области реагирования (нужно конечно кружок рисовать, но мне лень :))
function drawBox (x:Number, y:Number) {
var mc:MovieClip = this.createEmptyMovieClip ("mcBox" + this.getNextHighestDepth (), this.getNextHighestDepth ());
mc._x = x;
mc._y = y;
mc.lineStyle (0, 0x555555);
mc.moveTo (-this.raduisZone, -this.raduisZone);
mc.lineTo (this.raduisZone, -this.raduisZone);
mc.lineTo (this.raduisZone, this.raduisZone);
mc.lineTo (-this.raduisZone, this.raduisZone);
mc.lineTo (-this.raduisZone, -this.raduisZone);
}
//// проверяем входит ли координаты в окружность области реагирования
function getEntryZone (xA:Number, yA:Number, xB:Number, yB:Number):Boolean {
var dx:Number = xA - xB;
var dy:Number = yA - yB;
trace (Math.sqrt (dx * dx + dy * dy) + " " + this.raduisZone);
return Math.sqrt (dx * dx + dy * dy) <= this.raduisZone ? true : false;
}
this.createEmptyMovieClip ("mc", this.getNextHighestDepth ());
this.move = function () {
this.clear ();
this.lineStyle (0, 0, 20);
this.lineTo (this._xmouse, this._ymouse);
};
this.onMouseDown = function () {
if (!this.flag) {
for (var i:Number = 0; i < arrayPoint.length; i++) {
var x:Number = arrayPoint[i][0];
var y:Number = arrayPoint[i][1];
if (getEntryZone (x, y, this._xmouse, this._ymouse)) {
this.pointA = i;
break;
}
}
this.moveTo (this._xmouse, this._ymouse);
this.mc._x = this._xmouse;
this.mc._y = this._ymouse;
this.mc.onMouseMove = this.move;
this.flag = true;
} else {
this.mc.clear ();
delete this.mc.onMouseMove;
this.flag = false;
for (var i:Number = 0; i < arrayLine.length; i++) {
if (arrayLine[i][0] == this.pointA) {
var pointB:Number = arrayLine[i][1];
} else if (arrayLine[i][1] == this.pointA) {
var pointB:Number = arrayLine[i][0];
}
if (pointB != undefined) {
var x:Number = arrayPoint[pointB][0];
var y:Number = arrayPoint[pointB][1];
if (getEntryZone (x, y, this._xmouse, this._ymouse)) {
this.lineTo (this._xmouse, this._ymouse);
break;
}
}
}
}
};
//// координаты областей
var arrayPoint:Array = new Array ([100, 100], [150, 200], [250, 200], [200, 100]);
//// возможные линии между точками
var arrayLine:Array = new Array ([0, 1], [1, 2], [2, 3], [3, 0], [1, 3]);
this.lineStyle (0, 0);
//// радиус зоны контрольной точки, при попадении в которую, будет засчитывать результат
this.raduisZone = 10;
//// рисуем области
for (var i:Number = 0; i < arrayPoint.length; i++) {
drawBox (arrayPoint[i][0], arrayPoint[i][1]);
}

[Kikasso]

Извините, пожалуйста, а откуда это слово move?? Уже весь хелп облазил, не нашел.

[iNils]

Извините, пожалуйста, а откуда это слово move?? Уже весь хелп облазил, не нашел.Причем тут хелп? Создали функцию, теперь ее вызываем.

[Kikasso]

..позор.. :umnik2:

[Катринка]

iNils, благодарность моя не знает границ!:drinks:

[Катринка]

iNils, сорри за тупость, а я могу нарисовать кнопки и их засчитывать за области реагирования, м?

[L'rinel]

this.move = function ()
Это новая функция, видимо.

[iNils]

iNils, сорри за тупость, а я могу нарисовать кнопки и их засчитывать за области реагирования, м?Конечно :)

[Катринка]

iNils, а мне просто на прописанную в скрипте область "наложить" кнопки? Или можно это сделать "меньшей кровью"? :)

[iNils]

iNils, а мне просто на прописанную в скрипте область "наложить" кнопки? Или можно это сделать "меньшей кровью"? :)Мне только не понятно зачем. Чем не устраивает то, что я написал?

[motor4ik]

проще было дать тз )))) инилс всеровно безвозмездно работает )))

[motor4ik]

Мне только не понятно зачем. Чем не устраивает то, что я написал?

видимо по тз нужно чтобы кнопки были )))

[Катринка]

Мне только не понятно зачем. Чем не устраивает то, что я написал?


Рассказываю, что ЭТО в конечном итоге должно быть.
Курс английского языка. Поиск эквивалентов межды фразами на английском языке слева и на русском справа. Человек находит, тычет в кнопочку слева, проводит линию в столбец к кнопочке, что справа. И так все слова/выражения. Потом жмет кнопку "принять ответ" и переходит на следующую страницу, где ему будет сказано, правильно ли он на все ответил, или сколько у него было ошибок.

Почему нужны кнопки? Люди любят, чтобы все сверкало и переливалось.

То, что Вы написали меня не просто устраивает, это гораздо больше, чем то, что я ожидала тут получить :) Но есть ТЗ:boredom:

[Катринка]

видимо по тз нужно чтобы кнопки были )))

Ну да, именно.

[motor4ik]

я дааже знаю от кого ТЗ )))))

[Катринка]

я дааже знаю от кого ТЗ )))))
Ну-ка, ну-ка :)

[iNils]

В массив с линиями добавился еще один параметр true, который означает, что между указанными точками можно провести один раз линию (писать false можно, но смысла особого не имеет, так как можно просто удалить из массива саму запись двух точек)

То что выделенно желтым можно удалить, я добавил это только для визуального упрощения понимания, где какая точка.
//// функия рисующая области реагирования (нужно конечно кружок рисовать, но мне лень :))
function drawBox (x:Number, y:Number, id:Number) {
var mc:MovieClip = this.createEmptyMovieClip ("mcBox" + this.getNextHighestDepth (), this.getNextHighestDepth ());
mc._x = x;
mc._y = y;
mc.lineStyle (0, 0x555555);
mc.moveTo (-this.raduisZone, -this.raduisZone);
mc.lineTo (this.raduisZone, -this.raduisZone);
mc.lineTo (this.raduisZone, this.raduisZone);
mc.lineTo (-this.raduisZone, this.raduisZone);
mc.lineTo (-this.raduisZone, -this.raduisZone);
var txt:TextField = mc.createTextField ("txt", 0, -this.raduisZone, -this.raduisZone, this.raduisZone * 2, this.raduisZone * 2);
txt.text = String (id);
txt.selectable = false;
}
//// проверяем входит ли координаты в окружность области реагирования
function getEntryZone (xA:Number, yA:Number, xB:Number, yB:Number):Boolean {
var dx:Number = xA - xB;
var dy:Number = yA - yB;
trace (Math.sqrt (dx * dx + dy * dy) + " " + this.raduisZone);
return Math.sqrt (dx * dx + dy * dy) <= this.raduisZone ? true : false;
}
this.createEmptyMovieClip ("mc", this.getNextHighestDepth ());
this.move = function () {
this.clear ();
this.lineStyle (0, 0, 20);
this.lineTo (this._xmouse, this._ymouse);
};
this.onMouseDown = function () {
if (!this.flag) {
for (var i:Number = 0; i < arrayPoint.length; i++) {
var x:Number = arrayPoint[i][0];
var y:Number = arrayPoint[i][1];
if (getEntryZone (x, y, this._xmouse, this._ymouse)) {
this.pointA = i;
break;
}
}
this.moveTo (this._xmouse, this._ymouse);
this.mc._x = this._xmouse;
this.mc._y = this._ymouse;
this.mc.onMouseMove = this.move;
this.flag = true;
} else {
this.mc.clear ();
delete this.mc.onMouseMove;
this.flag = false;
for (var i:Number = 0; i < arrayLine.length; i++) {
if (arrayLine[i][0] == this.pointA) {
var pointB:Number = arrayLine[i][1];
} else if (arrayLine[i][1] == this.pointA) {
var pointB:Number = arrayLine[i][0];
}
if (pointB != undefined) {
var x:Number = arrayPoint[pointB][0];
var y:Number = arrayPoint[pointB][1];
if (getEntryZone (x, y, this._xmouse, this._ymouse)) {
if (arrayLine[i][2]) {
arrayLine[i][2] = false;
this.lineTo (this._xmouse, this._ymouse);
}
break;
}
}
}
}
};
//// координаты областей
var arrayPoint:Array = new Array ([100, 100], [150, 200], [250, 200], [200, 100]);
//// возможные линии между точками
var arrayLine:Array = new Array ([0, 1, true], [1, 2, true], [2, 3, true], [3, 0, true], [1, 3, true]);
this.lineStyle (0, 0);
//// радиус зоны контрольной точки, при попадении в которую, будет засчитывать результат
this.raduisZone = 10;
//// рисуем области
for (var i:Number = 0; i < arrayPoint.length; i++) {
drawBox (arrayPoint[i][0], arrayPoint[i][1], i);
}