Raphael.js - Использование атрибута fill для круга, заставляет элемент в круге исчезать.Как этого избежать? - PullRequest
Новая
       0

Raphael.js - Использование атрибута fill для круга, заставляет элемент в круге исчезать.Как этого избежать?

4 голосов
/ 25 декабря 2011

Пожалуйста, смотрите код ниже. Я пытаюсь нарисовать круг вокруг пути (значок, созданный основателем Raphael.js Димитрием), а затем залить круг цветом. Это, однако, рисует на вершине пути. Если бы я мог сначала нарисовать закрашенный круг, а затем нарисовать путь, это было бы решено. Но мне нужно сослаться на путь, потому что мне нужно найти его центр, чтобы нарисовать круг. Кто-нибудь может подсказать, пожалуйста, как это сделать? Мой код ниже.

Спасибо. 

<script>
    var myVar = {
            s: 1,                           
            pw: 850,
            ph: 450
        }                   
</script>

<script>
    var paper = new Raphael('figSellerBuyer', myVar.pw * myVar.s, myVar.ph * myVar.s);

    var market = paper.path(paths.marketBoundary);
    market.attr({fill: "rgb(75,245,75)", stroke: "None"});


    var humanIcon = paper.path("M21.021,16.349c-0.611-1.104-1.359-1.998-2.109-2.623c-0.875,0.641-1.941,1.031-3.103,1.031c-1.164,0-2.231-0.391-3.105-1.031c-0.75,0.625-1.498,1.519-2.111,2.623c-1.422,2.563-1.578,5.192-0.35,5.874c0.55,0.307,1.127,0.078,1.723-0.496c-0.105,0.582-0.166,1.213-0.166,1.873c0,2.932,1.139,5.307,2.543,5.307c0.846,0,1.265-0.865,1.466-2.189c0.201,1.324,0.62,2.189,1.463,2.189c1.406,0,2.545-2.375,2.545-5.307c0-0.66-0.061-1.291-0.168-1.873c0.598,0.574,1.174,0.803,1.725,0.496C22.602,21.541,22.443,18.912,21.021,16.349zM15.808,13.757c2.362,0,4.278-1.916,4.278-4.279s-1.916-4.279-4.278-4.279c-2.363,0-4.28,1.916-4.28,4.279S13.445,13.757,15.808,13.757z")

    humanIcon.attr({fill: "rgb(75,75,75)"}).scale(2.5,2.5);
    humanIcon.translate(40,40);

    var bbox = humanIcon.getBBox();

    var xcenter = Math.round(bbox.x + bbox.width/2.0);
    var ycenter = Math.round(bbox.y + bbox.height/2.0);

    var circle = paper.circle(xcenter, ycenter, 40);
    circle.attr({fill:"white"});



</script>

Ответы [ 3 ]

5 голосов
/ 29 декабря 2011

После долгих поисков в Google я нашел ответ здесь, в Stackoverflow.В то время я не сохранил ссылку на ответ и не помню ее.Если кто-нибудь найдет его, отредактируйте этот ответ и опубликуйте его.Однако я записал решение, и вот оно:

В Raphael можно использовать функции insertBefore() и insertAfter().В приведенном в вопросе примере кода это можно сделать, изменив последнюю строку на: 

circle.attr({fill:"white"}).insertBefore(humanIcon);

Спасибо тем, кто ответил.

0 голосов
/ 26 декабря 2011

Попробуйте использовать Element.toBack () и Element.toFront () Рафаэля.

В вашем случае кажется, что вы хотите нарисовать путь, затем нарисуйте круг, затемзвоните либо circle.toBack() или path.toFront().

0 голосов
/ 26 декабря 2011

Попробуйте изменить порядок, в котором они нарисованы.Или посмотрите на документы Raphael, чтобы узнать, есть ли атрибут «Z-index», который можно использовать для постоянного изменения положения пути в стеке слоев, доступных для рендеринга.

Редактировать: я не сделалпрочитал ваше объяснение достаточно хорошо.Если бы вы могли объявить свой объект, не рисуя его, возможно, вы могли бы взять BBox, а затем нарисовать его позже.

Редактировать, редактировать: SVG имеет тег «defs» для создания объектов без их рисования, поэтомупричина, по которой Рафаэль тоже может с этим справиться.

...