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

javascript fabricjs — добавление объекта на несколько холстов одним щелчком мыши

Я создаю приложение, которое может создать вашу собственную визитную карточку. Мне нужно добавить объект на два холста в один клик. Вот мои коды:

$('#image-list').on('click','.image-option',function(e) {
        var el = e.target;
        /*temp code*/
        var offset = 50;
        var left = fabric.util.getRandomInt(0 + offset, 200 - offset);
        var top = fabric.util.getRandomInt(0 + offset, 400 - offset);
        var angle = fabric.util.getRandomInt(-20, 40);
        var width = fabric.util.getRandomInt(30, 50);
        var opacity = (function(min, max){ return Math.random() * (max - min) + min; })(0.5, 1);
        var canvasObject;
        // if ($('#flip').attr('data-facing') === 'front') {
        //  canvasObject = canvas;
        // } else {
        //  canvasObject = canvas2;
        // }

        fabric.Image.fromURL(el.src, function(image) {
            image.set({
                left: left,
                top: top,
                angle: 0,
                padding: 10,
                cornersize: 10,
                hasRotatingPoint:true
            });

            canvas.add(image);
            canvas2.add(image);
        });
    })

Проблема в том, что когда я изменяю размер или перемещаю изображение на «переднем холсте», оно также отображается на «заднем холсте». В моем случае я не хочу, чтобы объект был таким. Итак, есть ли способ предотвратить «отражение» объекта на другом холсте? Спасибо.

fabricjs
16.08.2017

Ответы:


1

Вы не можете добавить один и тот же объект на 2 холста. Вы должны создать 2 объекта.

Также обратите внимание, что если на вашей странице есть элемент html-изображения, вам не нужно снова загружать его с URL-адреса. Уже загружен, поэтому передайте элемент изображения конструктору напрямую

$('#image-list').on('click','.image-option',function(e) {
    var el = e.target;
    /*temp code*/
    var offset = 50;
    var left = fabric.util.getRandomInt(0 + offset, 200 - offset);
    var top = fabric.util.getRandomInt(0 + offset, 400 - offset);
    var angle = fabric.util.getRandomInt(-20, 40);
    var width = fabric.util.getRandomInt(30, 50);
    var opacity = (function(min, max){ return Math.random() * (max - min) + min; })(0.5, 1);
    var canvasObject;
    // if ($('#flip').attr('data-facing') === 'front') {
    //  canvasObject = canvas;
    // } else {
    //  canvasObject = canvas2;
    // }

    image = new fabric.Image(el, {
            left: left,
            top: top,
            angle: 0,
            padding: 10,
            cornersize: 10,
            hasRotatingPoint:true
        });

    image2 = new fabric.Image(el, {
            left: left,
            top: top,
            angle: 0,
            padding: 10,
            cornersize: 10,
            hasRotatingPoint:true
        });

        canvas.add(image);
        canvas2.add(image2);
    });
})
18.08.2017
  • Спасибо за Ваш ответ. Я уже использовал это решение. Мне действительно нужно создать еще один объект для другого холста. 21.08.2017
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..