Nano Hash - криптовалюты, майнинг, программирование

Kineticjs Показать изображение на основе тега id

Я пытаюсь сделать интерактивную игру с тарелками, демонстрирующую размер порции. Недавно я столкнулся с тем, что Kineticjs может перетаскивать изображения на холст. Я сделал так, что изображения по умолчанию скрыты, но когда я добавляю селектор для отображения изображений, он показывает все изображения. Я настроил его так, чтобы идентификатор использовался в html для вызова «show» в javascript.

1) Как мне настроить это, чтобы оно отображало изображение на основе текста с использованием «id» в html, не выполняя несколько разных функций? Нужен ли каждому идентификатору отдельный тег, например «showorrange»?

    document.getElementById('show').addEventListener('click', function() {
        orangeImg.show();
        strawberryImg.show();
        layer.draw();
    }, false);

http://jsfiddle.net/m9uq7/

kineticjs
25.03.2014

Ответы:


1

Демонстрация: http://jsfiddle.net/m1erickson/y53v6/

Назначьте каждому элементу списка class="food" и идентификатор, соответствующий названию продукта (id="strawberry").

<ul>
    <li><a href="#" id="papaya" class="food">papaya</a></li>
    <li><a href="#" id="strawberry" class="food">Strawberry</a></li>
</ul>

Таким образом, вы можете попросить браузер прослушивать все клики по категории еды.

$(".food").click(function(){

    // any item with class="food" was clicked
    // so get the id of the clicked link

    var id=$(this).attr("id");

});

Также присвойте каждому Kinetic.Image идентификатор, соответствующий названию продукта

// strawberry
var strawberryImg = new Kinetic.Image({
    id:"strawberry",
    image: images.strawberry,
    x: 200,
    y: 55,
    width: 128,
    height: 128,
    draggable: true,
    stroke: 'orange',
    strokeWidth: 5,
    strokeEnabled: false,
    visible: false
});

Таким образом вы можете попросить KineticJS найти изображение с тем же именем, что и html-ссылка, по которой вы щелкнули.

Например, если была нажата ссылка «клубника», вы можете получить кинетическое изображение клубники следующим образом:

var node=stage.find("#"+$(this).attr("id"));
node.show();
layer.draw();

Таким образом, вы можете ответить на щелчок по якорю class="food" и показать соответствующее изображение:

$(".food").click(function(){
    var node=stage.find("#"+$(this).attr("id"));
    node.show();
    layer.draw();
    console.log($(this).attr("id"));
});
26.03.2014
  • Благодарю вас! Я планирую использовать около 70 изображений (для демонстрации тарелки с питанием). Загружает ли это все изображения, когда кто-то посещает веб-страницу или когда пользователь нажимает на ссылку? 27.03.2014
  • Я использовал тот же метод загрузки изображений, поэтому, если вы добавите 70 изображений к объекту sources, все они будут загружены до запуска приложения. :-) 27.03.2014
  • Привет, markE, твой ответ очень помогает, но у меня возникли проблемы с тем, чтобы это работало вне jfiddle. Я включил кинетический-v5.0.2.min.js и убедился, что скрипт находится ниже html. Когда я запускаю в браузере, я вижу Uncaught ReferenceError: $ не определено в консоли разработчика. Поэтому, когда я нажимаю на опцию навигации, изображение не отображается. Любые идеи, почему? 19.04.2014
  • $ означает jQuery, поэтому включите это в свой заголовок также: ">code.jquery.com/jquery.min.js›‹/script› Я использую jquery в своих примерах, чтобы сгладить многие несовместимости браузеров (я настоятельно рекомендую это). Вы можете легко преобразовать его в обычный старый JS, используя синтаксис document.getElementById и .click(yourClickHandler). Удачи с вашим проектом! 19.04.2014
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..