Создание многоугольника в ActionScript 3 из набора координатных пар

Question

Я делаю приложение во Flash и хочу определить несколько полигонов, с которыми я могу связать события при наведении курсора, чтобы добавить аннотации к изображению.Я могу обычно создавать их во Flash, но я хочу загрузить некоторые внешние данные, список координат и создать многоугольники с помощью ActionScript.

Очевидно, что это всего лишь горячие точки, поэтому я хочу, чтобы они были невидимыми,но поиск моей проблемы показывает только результаты отрисовки полигонов из координат с использованием свойства graphics для movieclip.

Данные никогда не изменяются, поэтому можно было бы просто нарисовать все полигонывручную с помощью инструмента «Перо», но данные используются в другом месте, поэтому было бы гораздо легче поддерживать, если бы я мог добавлять новые зоны, просто обновляя текстовый файл.

Answer 1

var pointsRawXML:String = '<mypoints>\n<point x="100", y="100 />\n<point x="100", y="0 />\n<point x="0", y="0 />\n<point x="0", y="100 />\n</mypoints>';

даст вам:

<mypoints>
    <point x="100", y="100 />
    <point x="100", y="0 />
    <point x="0", y="0 />
    <point x="0", y="100 />
</mypoints>

Затем вы загрузите и проанализируете его:

var points:XML = new XML(pointsRawXML);

var pointsXMLNodeList:XMLList = points.children();

var i:uint = 0;

var pointsVector<Point> polygonPoints = new Vector<Point>();

for(i = 0; i < pointsXMLNodeList.lenght(); ++i) {
    var tmpXML:XML = XML(pointsXMLNodeList[i]);
    var pX:Number = tmpXML.attribute("x") as Number;
    var pY:Number = tmpXML.attribute("y") as Number;
    var p:Point = Point(pX, pY);
    polygonPoints.push(p);
}

Теперь вы можете нарисовать многоугольник внутри графического объекта спрайта:

//Note we can recycle the "i" variable
var polyContainerSprite:Sprite = new Sprite();
polyContainerSprite.graphics.beginFill(0, 1);

for(i = 0; i < pointsVector.length; ++i) {
    if(i == 0) {
        polyContainerSprite.graphics.moveTo(pointsVector[i].x, pointsVector[i].y);
    }else {
        polyContainerSprite.graphics.lineTo(pointsVector[i].x, pointsVector[i].y);
    }    
}

stage.addChild(polyContainerSprite);

Нечто подобное должно работать.Обратите внимание, что весь этот код не тестировался, и прошло около года с тех пор, как я на самом деле сделал что-то во флэш-памяти.LOL, так что проверьте, и если у вас есть какие-либо вопросы / проблемы, дайте мне знать, я помогу прояснить.

Также обратите внимание, что вам нужно будет в основном настроить этот код, чтобы "цикл" 'n' раз, длякаждый поли / спрайт, который вам нужен.Также обратите внимание, что вы можете сохранить свой XML в файлы и просто загрузить их в виде объекта URLLoader и преобразовать данные в XML.

Answer 2

Что не так со свойством graphics? Предполагая, что у вас есть массив координат точек (x0, y0, x1, y1, .. xN, yN) для многоугольника, вы можете добавить точку доступа многоугольника следующим образом:

var hotspot:Sprite = new Sprite();
var g:Graphics = hotspot.graphics;
// fill with an alpha of 0, so the shape is invisible
g.beginFill(0xffffff, 0);
for(var i:int = 0; i < polyCoords.length; i += 2){
    if(i == 0){
        g.moveTo(polyCoords[i], polyCoords[i + 1]);
    } else {
        g.lineTo(polyCoords[i], polyCoords[i + 1]);
    }
}
g.endFill();
// add a mouse-event to the hotspot etc.
hotspot.addMouseEvent(MouseEvent.CLICK, hotspotClickHandler);
addChild(hotspot);

Ваши координаты могут быть простым потоком чисел, который вы конвертируете в массив, используя String.split

Answer 3

XML:

        <mask>
            <point x="30" y="10" />
            <point x="50" y="10" />
            <point x="50" y="30" />
            <point x="30" y="30"/>
        </mask> 

Actionscript

    public function paint(points:XMLList,maskColor:uint = 0xFF0000):void{

        var mask:Shape = new Shape();
        mask.graphics.beginFill(maskColor);     

        var i:int = 0;
        for each(var xnNode: XML in points) {       
            if (i==0){
                mask.graphics.moveTo(xnNode.@x, xnNode.@y);
            }
            mask.graphics.lineTo(xnNode.@x, xnNode.@y);
            i++;
        }
        mask.graphics.endFill();    
        this.addChild(mask);            
    }