Задать вопрос
@LoranDeMarcus
javascript

Как передать массив объектов другой функции?

Добрый вечер, столкнулся с проблемой. Не получается передать данные объекта shapeParams в функцию circle() .
Пока что 

function getShapeParams() {
  var shapeParams = {};
  shapeParams = {
    radius: document.getElementsByClassName('radius')[0].value.toString(),
    x1Crd: document.getElementsByClassName('circle-x1-crd')[0].value.toString(),
    x2Crd: document.getElementsByClassName('circle-y2-crd')[0].value.toString()
  };
  console.log(shapeParams.radius);
}

function circle() {
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');

  getShapeParams(shapeParams);

  this.radius = shapeParams.radius;
  this.x1Crd = shapeParams.x1Crd;
  this.x2Crd = shapeParams.x2Crd;

  context.clearRect(0, 0, canvas.width, canvas.height);
  context.beginPath();
  context.arc(x1Crd, x2Crd, radius, 0, Math.PI*2, false);
  context.fillStyle = 'red';
  context.fill();
  context.lineWidth = 1;
  context.strokeStyle = 'red';
  context.stroke();
}

circle();

<body>
    <div class="container">
        <div class="col-lg-12 text-center">
            <h3>Get your own shapes</h3>
        </div>
        <div class="row">
            <div class="col-lg-8">
                <label>Here ya draw:</label>
                <canvas height='360' width='720' id='canvas'></canvas>
            </div>
            <div class="col-lg-4">
                <label>Ur settings:</label>
                <form class="form">
                    <div class="form-group">
                        <select class="form-control shape-type">
                            <option value="">Choose shape type</option>
                            <option value="circle">Circle</option>
                            <option value="rectangle">Rectangle</option>
                            <option value="triangle">Triangle</option>
                        </select>
                        <div class="help-block">Select type and input shape parameters</div>
                    </div>
                    <div class="circle-form">
                        <div class="form-group">
                            <label>Radius:</label>
                            <input type="number" class="form-control radius" value="10" />
                        </div>
                        <div class="form-group">
                            <label>X-crd:</label>
                            <input type="number" class="form-control circle-x1-crd" value="50" />
                        </div>
                        <div class="form-group">
                            <label>Y-crd:</label>
                            <input type="number" class="form-control circle-y2-crd" value="20" />
                        </div>
                    </div>
                </form>
              </div>
            </div>
        </div>
    </div>
  </body>
  • Вопрос задан
  • 506 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 1
@MrTimon
getShapeParams Переписать так:
function getShapeParams() {
  var shapeParams = {};
  shapeParams = {
    radius: document.getElementsByClassName('radius')[0].value.toString(),
    x1Crd: document.getElementsByClassName('circle-x1-crd')[0].value.toString(),
    x2Crd: document.getElementsByClassName('circle-y2-crd')[0].value.toString()
  };
  console.log(shapeParams.radius);
  return shapeParams;
}


а во второй ф-ции: getShapeParams(shapeParams); заменить на var shapeParams = getShapeParams(); и все должно работать.

Ну или обявить обект shapeParams вне функций. тогда получиться так:
var shapeParams = {};
function getShapeParams() {
  shapeParams = {
    radius: document.getElementsByClassName('radius')[0].value.toString(),
    x1Crd: document.getElementsByClassName('circle-x1-crd')[0].value.toString(),
    x2Crd: document.getElementsByClassName('circle-y2-crd')[0].value.toString()
  };
  console.log(shapeParams.radius);
}

function circle() {
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');

  getShapeParams();

  this.radius = shapeParams.radius;
  this.x1Crd = shapeParams.x1Crd;
  this.x2Crd = shapeParams.x2Crd;

  context.clearRect(0, 0, canvas.width, canvas.height);
  context.beginPath();
  context.arc(x1Crd, x2Crd, radius, 0, Math.PI*2, false);
  context.fillStyle = 'red';
  context.fill();
  context.lineWidth = 1;
  context.strokeStyle = 'red';
  context.stroke();
}

circle();


но первый метод полутше будет.
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript Developer
AppsTrain.io
от 80 000 до 180 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Дизайн главной страницы сайта-агрегатора мероприятий Workevent
02 нояб. 2024, в 17:19
20000 руб./за проект
Добавить поддержку прокси в софт Python, внести дополнительные правки
02 нояб. 2024, в 17:06
10000 руб./за проект
Доработать скрипт на Python для обработки данных от сканера QR кодов
02 нояб. 2024, в 16:54
5000 руб./за проект
Ещё заказы