Пользовательский элемент Polymer 3.0 - Как использовать JavaScript для взаимодействия с SVG - PullRequest
Новая
       23

Пользовательский элемент Polymer 3.0 - Как использовать JavaScript для взаимодействия с SVG

0 голосов
/ 25 сентября 2018

Я новичок в Polymer, поэтому я учусь в процессе разработки.Прямо сейчас я использую последнюю версию, Polymer 3.0.У меня уже была рабочая полоса на этом сайте, над которым я работаю.Пока я пытался заставить все работать на полимере, я застрял на том, чтобы заставить работать javascript.

На исходном сайте я использовал этот код

index.html 

                <div class="year-overview">

                    <div class="ano-lectivo">
                        <svg class="progress-ring" width="50%" height="50%" opacity="0" viewBox="0 0 42 42">
                            <circle class="progress-ring__circle" stroke="white" fill="transparent" r="15.91549430918954" cx="21" cy="21"></circle>
                            <text x="50%" y="53%" class="circle-text" text-anchor="middle">
                                <tspan class="currentDay">35</tspan>
                                <tspan class="daysLeft">/ 300</tspan>
                                <tspan x="50%" y="60%">Días Lectivos</tspan>
                            </text>
                        </svg>
                    </div>

И это файл javascript: 

        function circleCircus(ringClass, circleClass, ringProgress) {
                var circle = document.querySelector(circleClass);
                var radius = circle.r.baseVal.value;
                var circumference = radius * 2 * Math.PI;
                var circleSVG = document.querySelector(ringClass); //For changing the opacity and not showing the circle before it loads

                circle.style.strokeDasharray = `${circumference} ${circumference}`;
                circle.style.strokeDashoffset = `${circumference}`;

                function setProgress(percent) {
                    const offset = circumference - percent / 100 * circumference;
                    circle.style.strokeDashoffset = offset;
                }

            setTimeout(function() {circleSVG.setAttribute("opacity", "100%");}, 1000); //Changing the circle opacity
            setTimeout(function() { setProgress(ringProgress); }, 2000); //Changin the value in order to animate
        }

        //----------------------Progress Bar 1------------------------------------
        circleCircus('.progress-ring', '.progress-ring__circle', 50);

Теперь, когда я работаю над Polymer, я создавал пользовательский элемент для кольцевой диаграммы, но я не знаю, как его использовать или где его использовать.Поместите функцию, которая заставляет работать strokeDasharray и strokeDashoffset: 

            import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';

            class DonutChart extends PolymerElement {
                static get template() {
                    return html`
                        <style>

                            .progress-ring__circle {
                                stroke-width: 3;
                                stroke: #000;
                                position: relative;
                                transition: stroke-dashoffset 0.35s, stroke-width 500ms ease-out, stroke 500ms ease-out;
                                -webkit-transition: stroke-dashoffset 0.35s, stroke-width 500ms ease-out, stroke 500ms ease-out; /* For Safari 3.1 to 6.0 */
                                transform: rotate(-90deg);
                                transform-origin: 50% 50%;
                            }

                            .currentDay {
                                font-size: 40%;
                                overflow: visible;
                                -webkit-transition: font-size 500ms ease-out; /* For Safari 3.1 to 6.0 */
                                transition: font-size 500ms ease-out;
                            }

                            .daysLeft {
                                font-size: 40%;
                                -webkit-transition: font-size 500ms, color 500ms; /* For Safari 3.1 to 6.0 */
                                transition: font-size 500ms, color 500ms;
                            }

                            .description {
                                font-size: 20%;
                            }


                            .circle-text {
                                fill: #000;
                            }

                            .progress-ring {
                                display: block;
                                position: relative;
                                margin-left: auto;
                                margin-right: auto;
                            }

                            svg:hover .currentDay {
                                font-size: 60%;
                            }

                            svg:hover .daysLeft {
                                font-size: 10%;
                            }


                            svg:hover .progress-ring__circle {
                                stroke-width: 1;
                                stroke: #5a64ed;
                            }        

                        </style>

                        <svg class="progress-ring" width="100%" height="100%" viewBox="0 0 42 42">
                            <circle class="progress-ring__circle" stroke="white" fill="transparent" r="15.91549430918954" cx="21" cy="21"></circle>
                            <text x="50%" y="53%" class="circle-text" text-anchor="middle">
                            <tspan class="numbers" x="54%" y="50%"><tspan class="currentDay">35</tspan><tspan class="daysLeft">/300</tspan></tspan>

                                <tspan x="50%" y="60%" class="description">Días Lectivos</tspan>
                            </text>
                        </svg>

                    `;
                }

                constructor() {
                    super();
                }

                    var circle = this.shadowRoot.querySelector('.progress-ring__circle');
                    var radius = circle.r.baseVal.value;
                    var circumference = radiius * 2 * Math.PI;
                    var circleSVG = this.shadowRoot.querySelector('.progress-ring');

                    circle.style.strokeDasharray = `${circumference} ${circumference}`;
                    circle.style.strokeDashoffset = `${circumference}`;

                    function setProgress(percent) {
                        const offset = circumference - percent / 100 * circumference;
                        circle.style.strokeDashoffset = offset;
                    }
                    setProgress(79);



            }

            customElements.define('donut-chart', DonutChart);

Вот мой оригинальный код и то, что я пытаюсь выполнить в пользовательском элементе: https://codepen.io/maganalexis/pen/ePOxYX

СпасибоВы за помощь.

1 Ответ

0 голосов
/ 28 сентября 2018

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

            import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';

            class DonutChart extends PolymerElement {
                static get template() {
                    return html`
                        <style>

                            .progress-ring__circle {
                                stroke-width: 3;
                                stroke: #000;
                                position: relative;
                                transition: stroke-dashoffset 0.35s, stroke-width 500ms ease-out, stroke 500ms ease-out;
                                -webkit-transition: stroke-dashoffset 0.35s, stroke-width 500ms ease-out, stroke 500ms ease-out; /* For Safari 3.1 to 6.0 */
                                transform: rotate(-90deg);
                                transform-origin: 50% 50%;
                            }

                            .currentDay {
                                font-size: 40%;
                                overflow: visible;
                                -webkit-transition: font-size 500ms ease-out; /* For Safari 3.1 to 6.0 */
                                transition: font-size 500ms ease-out;
                            }

                            .daysLeft {
                                font-size: 40%;
                                -webkit-transition: font-size 500ms, color 500ms; /* For Safari 3.1 to 6.0 */
                                transition: font-size 500ms, color 500ms;
                            }

                            .description {
                                font-size: 20%;
                            }


                            .circle-text {
                                fill: #000;
                            }

                            .progress-ring {
                                display: block;
                                position: relative;
                                margin-left: auto;
                                margin-right: auto;
                            }

                            svg:hover .currentDay {
                                font-size: 60%;
                            }

                            svg:hover .daysLeft {
                                font-size: 10%;
                            }


                            svg:hover .progress-ring__circle {
                                stroke-width: 1;
                                stroke: #5a64ed;
                            }        

                        </style>

                        <svg class="progress-ring" on-load="circleCircus" width="100%" height="100%" viewBox="0 0 42 42">
                            <circle class="progress-ring__circle" stroke="white" fill="transparent" r="15.91549430918954" cx="21" cy="21"></circle>
                            <text x="50%" y="53%" class="circle-text" text-anchor="middle">
                            <tspan class="numbers" x="54%" y="50%"><tspan class="currentDay">[[progressNum]]</tspan><tspan class="daysLeft">[[totalNum]]</tspan></tspan>

                                <tspan x="50%" y="60%" class="description">[[lowDescription]]</tspan>
                            </text>
                        </svg>

                    `;
                }

                static get properties() {
                    return {
                        progressNum: {
                            type: Number
                        },
                        totalNum: {
                            type: String
                        },
                        lowDescription: {
                            type: String
                        }
                    };
                }

                constructor() {
                    super();
                }




                ready(){
                    super.ready();

                    var circle = this.shadowRoot.querySelector('.progress-ring__circle');
                    var radius = circle.r.baseVal.value;
                    var circumference = radius * 2 * Math.PI;
                    var circleSVG = this.shadowRoot.querySelector('.progress-ring'); //For changing the opacity and not showing the circle before it loads
                    var proNum = `${this.progressNum}`;

                    circle.style.strokeDasharray = `${circumference} ${circumference}`;
                    circle.style.strokeDashoffset = `${circumference}`;

                    function setProgress(percent) {
                        const offset = circumference - percent / 100 * circumference;
                        circle.style.strokeDashoffset = offset;
                    }

                    setTimeout(function() {circleSVG.setAttribute("opacity", "100%");}, 1000); //Changing the circle opacity
                    setTimeout(function() { setProgress(proNum); }, 2000); //Changin the value in order to animate
                }


            }

            customElements.define('donut-chart', DonutChart);
...