DEV Community: Spsoi

HTML5 Javascript Canvas : Collision - Drag And Drop

Spsoi — Sat, 12 Feb 2022 09:25:24 +0000

Читать снизу вверх

Продолжение записей
spsoi

Код берём отсюда
jsfiddle.net

При наведении на элемент канваса, cursor = pointer

function changeCursor(event) { // постоянно отрисовываем
    console.log('changeCursor');
    let mouse = coordinateMouseByCanvas(event); // получаем координаты мыши
    console.log(mouse);
    for (element of elements) {
        x_final = element.left + element.width; // правый край элемента по x
        y_final = element.top + element.height; // низ края элемента по y
        if (mouse.x > element.left && mouse.x < x_final && mouse.y > element.top && mouse.y < y_final) {
            document.body.style.cursor = 'pointer';
            break;
        } else {
            document.body.style.cursor = 'default';
        }
    }
}

Проверяем, если мышка отпущена над элементом то передвигаемый элемент принимает координаты того элемента.

Если мышка не над элементом, проверяем сам элемент находится ли над каким либо элементом.

jsfiddle.net

function releaseMouseButton (event) { // отпускаем мышку
    // 5
    let mouse = coordinateMouseByCanvas(event);
    if (!elementClick) { return }
    elementClickLeftEdge = elementClick.left; // левая сторона
    elementClickRightEdge = elementClick.left + elementClick.width; // правая сторона

    elementClickTopEdge = elementClick.top; // верхняя сторона
    elementClickBottomEdge = elementClick.top + elementClick.height; // нижняя сторона

    let elementFound = false;
    elements.forEach ( function (element) { // где находятся элементы

        x_final = element.left + element.width; // правый край элемента по x
        y_final = element.top + element.height; // низ края элемента по y

        // Мышка над элементом
        if (mouse.x > element.left && mouse.x < x_final && mouse.y > element.top && mouse.y < y_final) { //!*
            elementClick.top = element.top;
            elementClick.left = element.left;
            window.requestAnimationFrame(draw);
            elementFound = true;
        }

        // Мышка не над элементом, но передвигаемый элемент над элементом
        if (elementFound == false && elementClickTopEdge < y_final && // Меньше координата нижнее ребра
            elementClickTopEdge > element.top && 
            elementClickLeftEdge < x_final && 
            elementClickRightEdge > element.left) { // Меньше координата левого ребра

            elementClick.top = element.top;
            elementClick.left = element.left;
            window.requestAnimationFrame(draw);
        }

    });
    elementClick = null;

}
}

Теперь при событии когда мы левую кнопку мыши отпускаем, если наш передвигаемый элемент находится над другим элементом, он должен перенять его координаты (слиться с ним)

Для этого дополним функцию releaseMouseButton.

Определим координаты перетаскиваемого элемента, и элемента под ним.

jsfiddle.net

function releaseMouseButton (event) { // отпускаем мышку
    // 5
    if (!elementClick) { return }
    elementClickLeftEdge = elementClick.left; // левая сторона
    elementClickRightEdge = elementClick.left + elementClick.width; // правая сторона

    elementClickTopEdge = elementClick.top; // верхняя сторона
    elementClickBottomEdge = elementClick.top + elementClick.height; // нижняя сторона

    elements.forEach ( function (element) { // где находятся элементы

        x_final = element.left + element.width; // правый край элемента по x
        y_final = element.top + element.height; // низ края элемента по y
        if ( elementClickTopEdge < y_final && // Меньше координата нижнего ребра
            elementClickTopEdge > element.top && 
            elementClickLeftEdge < x_final && 
            elementClickRightEdge > element.left) { // Меньше координата левого ребра

            elementClick.top = element.top;
            elementClick.left = element.left;
            window.requestAnimationFrame(draw);
        }

    });
    elementClick = null;

}

Для начала, выносим получение координат мыши над canvas, в отдельную функцию:

function coordinateMouseByCanvas (event) {
    let infoPos = canvas.getBoundingClientRect(); // возвращает размер элемента и его позицию относительно viewport 
    x_click = event.clientX - infoPos.left; // пиксель по x внутри тэга canvas на который нажали
    y_click = event.clientY - infoPos.top; // пиксель по y внутри тэга canvas на который нажали
    return {x: x_click, y:y_click}
}

HTML5 Javascript Canvas : Rectangular Collision

Spsoi — Fri, 11 Feb 2022 11:31:17 +0000

Финал
jsfiddle.net

canvas = document.querySelector('#canvas');
let c = canvas.getContext('2d');

canvas.width = innerWidth;
canvas.height = innerHeight;

let mouse = {
    x: innerWidth / 2,
    y: innerHeight / 2
}

let colors = [
    '#2185c5',
    '#7ECEFD',
    '#FFF6E5',
    '#FF7F66'
];

document.addEventListener("mousemove", function(event){
    mouse.x = event.clientX;
    mouse.y = event.clientY;
});

function animate() {
    requestAnimationFrame(animate);
    c.fillStyle = '#1A1A23';
    c.fillRect(0, 0, canvas.width, canvas.height);

    let blueRectanglesX = canvas.width / 2 - 50;
    let blueRectanglesY = canvas.height / 2 - 50;
    if (mouse.x + 100 >= blueRectanglesX &&  // обнаружение пересечение слева
        mouse.x <= blueRectanglesX + 100 &&  // обнаружение пересечение справа
        mouse.y + 100 >= blueRectanglesY && // !* обнаружение пересечение сверх
        mouse.y <= blueRectanglesY + 100// !* обнаружение пересечение снизу
        ) {
        console.log('Пересечение');
    }

    // red
    c.fillStyle = '#E86262';
    c.fillRect(mouse.x, mouse.y, 100, 100);

    // blue
    c.fillStyle = '#92ABEA';
    c.fillRect(canvas.width / 2 - 50, canvas.height / 2 - 50, 100, 100);

}

animate();

Отслеживаем пересечение снизу и сверху

jsfiddle.net

function animate() {
    requestAnimationFrame(animate);
    c.fillStyle = '#1A1A23';
    c.fillRect(0, 0, canvas.width, canvas.height);

    if (mouse.x + 100 >= canvas.width / 2 - 50 &&  // обнаружение пересечение слева
        mouse.x <= canvas.width / 2 - 50 + 100 &&  // обнаружение пересечение справа
        mouse.y + 100 >= canvas.height / 2 - 50 && // !* обнаружение пересечение сверх
        mouse.y <= canvas.height / 2 - 50 + 100// !* обнаружение пересечение снизу
        ) {
        console.log('Пересечение');
    }

    // red
    c.fillStyle = '#E86262';
    c.fillRect(mouse.x, mouse.y, 100, 100);

    // blue
    c.fillStyle = '#92ABEA';
    c.fillRect(canvas.width / 2 - 50, canvas.height / 2 - 50, 100, 100);

}

Отслеживаем пересечение справа.

jsfiddle.net

function animate() {
    requestAnimationFrame(animate);
    c.fillStyle = '#1A1A23';
    c.fillRect(0, 0, canvas.width, canvas.height);

    if (mouse.x + 100 >= canvas.width / 2 - 50 &&  // обнаружение пересечение слева
        mouse.x <= canvas.width / 2 - 50 + 100 ) { // !* обнаружение пересечение справа
        console.log('Чпоньк');
    }

    // red
    c.fillStyle = '#E86262';
    c.fillRect(mouse.x, mouse.y, 100, 100);

    // blue
    c.fillStyle = '#92ABEA';
    c.fillRect(canvas.width / 2 - 50, canvas.height / 2 - 50, 100, 100);

}

Отслеживаем пересечение слева.
jsfiddle.net

function animate() {
    requestAnimationFrame(animate);
    c.fillStyle = '#1A1A23';
    c.fillRect(0, 0, canvas.width, canvas.height);

    if (mouse.x + 100 >= canvas.width / 2 - 50) { // !* обнаружение пересечение слева
        console.log('Чпоньк');
    }

    // red
    c.fillStyle = '#E86262';
    c.fillRect(mouse.x, mouse.y, 100, 100);

    // blue
    c.fillStyle = '#92ABEA';
    c.fillRect(canvas.width / 2 - 50, canvas.height / 2 - 50, 100, 100);

}

Отрисуем два квадрата

jsfiddle.net

canvas.js

canvas = document.querySelector('#canvas');
let c = canvas.getContext('2d');

canvas.width = innerWidth;
canvas.height = innerHeight;

let mouse = {
    x: innerWidth / 2,
    y: innerHeight / 2
}

let colors = [
    '#2185c5',
    '#7ECEFD',
    '#FFF6E5',
    '#FF7F66'
];

document.addEventListener("mousemove", function(event){
    mouse.x = event.clientX;
    mouse.y = event.clientY;
});

function animate() {
    requestAnimationFrame(animate);
    c.fillStyle = '#1A1A23';
    c.fillRect(0, 0, canvas.width, canvas.height);

    c.fillStyle = '#E86262';
    c.fillRect(mouse.x, mouse.y, 100, 100);

    c.fillStyle = '#92ABEA';
    c.fillRect(canvas.width / 2 - 50, canvas.height / 2 - 50, 100, 100);

}

animate();

style.css

canvas {
    border: 1px solid #000;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas" width="300" height="300"></canvas>
    <script  src="canvas.js" ></script>
</body>
</html>

HTML5 Javascript Canvas Collision 2

Spsoi — Thu, 10 Feb 2022 11:49:01 +0000

Читать сверху вниз
Будет пополнятся

Финал
Красим шарики под курсором
jsfiddle.net

function Particle (x, y, radius, color) { // шарик
    // 2
    this.x =x;
    this.y = y;
    this.radius = radius;
    this.color = randomColor(colors);// !*
    this.mass = 1;
    this.opacity = 0; // !* // Прозрачность
    this.velocity = { 
        x: (Math.random() - 0.5) * 5,// !*
        y: (Math.random() - 0.5) * 5,// !*
    }

    this.update = particles => { 
        this.draw();

        for (let i = 0; i < particles.length; i++) {
            if (this === particles[i]) { continue }
            if (getDistance(this.x, this.y, particles[i].x, particles[i].y) - this.radius * 2 < 0) {
                resolveCollision(this, particles[i]); // !*
            }
        }

        if (this.x - this.radius <= 0 || 
            this.x + this.radius >= innerWidth) { 
                this.velocity.x = -this.velocity.x;
        }

        if (this.y - this.radius <= 0 ||
            this.y + this.radius >= innerHeight) { 
                this.velocity.y = -this.velocity.y;
        }

        // В консоль что шарик под курсором мыши.
        if (getDistance(mouse.x, mouse.y, this.x, this.y) < 120 && this.opacity < 0.2) { //*!
            this.opacity += 0.02;
            console.log('Под курсором'); 
        }else if (this.opacity > 0) {
            this.opacity -= 0.02;
            this.opacity = Math.max(0, this.opacity);
        }

        this.x += this.velocity.x;
        this.y += this.velocity.y;
    }

    this.draw = function () {
        c.beginPath();
            c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
            c.save(); //*! // сохраняем состаяние
                c.globalAlpha = this.opacity;
                c.fillStyle = this.color;
                c.fill(); //*!
            c.restore();//*! // востанавливаем состояние после c.save()
            c.strokeStyle = this.color; //*!
            c.stroke();
        c.closePath();
    }
}

Отскок не только от края но и от других частиц, кругов и т.д

jsfiddle.net

function rotate(velocity, angle) {  // !*
    const rotatedVelocities = {
        x: velocity.x * Math.cos(angle) - velocity.y * Math.sin(angle),
        y: velocity.x * Math.sin(angle) + velocity.y * Math.cos(angle)
    };

    return rotatedVelocities;
}

function resolveCollision(particle, otherParticle) {  // !*
    const xVelocityDiff = particle.velocity.x - otherParticle.velocity.x;
    const yVelocityDiff = particle.velocity.y - otherParticle.velocity.y;

    const xDist = otherParticle.x - particle.x;
    const yDist = otherParticle.y - particle.y;

    // Предотвращение случайного наложения частиц
    if (xVelocityDiff * xDist + yVelocityDiff * yDist >= 0) {

        // Угол захвата между двумя сталкивающимися частицами
        const angle = -Math.atan2(otherParticle.y - particle.y, otherParticle.x - particle.x);

        // Сохраняем массу в переменную для лучшей читаемости в уравнении столкновения
        const m1 = particle.mass;
        const m2 = otherParticle.mass;

        // Скорость до уравнения
        const u1 = rotate(particle.velocity, angle);
        const u2 = rotate(otherParticle.velocity, angle);

        // Скорость после 1d уравнения столкновения
        const v1 = { x: u1.x * (m1 - m2) / (m1 + m2) + u2.x * 2 * m2 / (m1 + m2), y: u1.y };
        const v2 = { x: u2.x * (m1 - m2) / (m1 + m2) + u1.x * 2 * m2 / (m1 + m2), y: u2.y };

        // Конечная скорость после поворота оси обратно в исходное положение
        const vFinal1 = rotate(v1, -angle);
        const vFinal2 = rotate(v2, -angle);

        // Поменяй местами скорости частиц для реалистичного эффекта отскока
        particle.velocity.x = vFinal1.x;
        particle.velocity.y = vFinal1.y;

        otherParticle.velocity.x = vFinal2.x;
        otherParticle.velocity.y = vFinal2.y;
    }
}


function Particle (x, y, radius, color) { // шарик
    // 2
    this.x =x;
    this.y = y;
    this.radius = radius;
    this.color = color;
    this.mass = 1;
    this.velocity = { 
        x: Math.random() - 0.5,
        y: Math.random() - 0.5,
    }

    this.update = particles => { 
        this.draw();

        for (let i = 0; i < particles.length; i++) {
            if (this === particles[i]) { continue }
            if (getDistance(this.x, this.y, particles[i].x, particles[i].y) - this.radius * 2 < 0) {
                resolveCollision(this, particles[i]); // !*
            }
        }

        if (this.x - this.radius <= 0 || 
            this.x + this.radius >= innerWidth) { 
                this.velocity.x = -this.velocity.x;
        }

        if (this.y - this.radius <= 0 ||
            this.y + this.radius >= innerHeight) { 
                this.velocity.y = -this.velocity.y;
        }

        this.x += this.velocity.x;
        this.y += this.velocity.y;
    }

    this.draw = function () {
        c.beginPath();
            c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
            c.fillStyle = this.color;
            // c.fill(); //*!
            c.stroke();
        c.closePath();
    }
}

Отскок от краёв экрана

jsfiddle.net

function Particle (x, y, radius, color) { // шарик
    // 2
    this.x =x;
    this.y = y;
    this.radius = radius;
    this.color = color;
    this.velocity = { 
        x: Math.random() - 0.5,
        y: Math.random() - 0.5,
    }

    this.update = particles => { 
        this.draw();

        for (let i = 0; i < particles.length; i++) {
            if (this === particles[i]) { continue }
            if (getDistance(this.x, this.y, particles[i].x, particles[i].y) - this.radius * 2 < 0) {
                console.log('has collided');
            }
        }

        if (this.x - this.radius <= 0 || // !*
            this.x + this.radius >= innerWidth) { 
                this.velocity.x = -this.velocity.x;
        }

        if (this.y - this.radius <= 0 || // !*
            this.y + this.radius >= innerHeight) { 
                this.velocity.y = -this.velocity.y;
        }

        this.x += this.velocity.x;
        this.y += this.velocity.y;
    }

    this.draw = function () {
        c.beginPath();
            c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
            c.fillStyle = this.color;
            // c.fill(); //*!
            c.stroke();
        c.closePath();
    }
}

Отслеживаем столкновения и пересечения кругов + анимируем
jsfiddle.net

function Particle (x, y, radius, color) { // шарик
    // 2
    this.x =x;
    this.y = y;
    this.radius = radius;
    this.color = color;
    this.velocity = { // !*
        x: Math.random() - 0.5,
        y: Math.random() - 0.5,
    }

    this.update = particles => { // !*
        this.draw();

        for (let i = 0; i < particles.length; i++) {// !*
            if (this === particles[i]) { continue }
            if (getDistance(this.x, this.y, particles[i].x, particles[i].y) - this.radius * 2 < 0) {
                console.log('has collided');
            }
        }

        this.x += this.velocity.x;// !*
        this.y += this.velocity.y;// !*
    }

    this.draw = function () {
        c.beginPath();
            c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
            c.fillStyle = this.color;
            // c.fill(); //*!
            c.stroke();
        c.closePath();
    }
}

function animate() {
    requestAnimationFrame(animate);
    c.clearRect(0,0, canvas.width, canvas.height);
    particles.forEach(particle => { // !*
        particle.update(particles);// !*
    })
}

Круги теперь не уходят за экран canvas на половину.

jsfiddle.net

function init() { // точка входа
    particles = []; 
    //1
    for (let i = 0; i < 4; i++) { 
        const radius = 100;
        let x = randomIntFromRange(radius, canvas.width - radius); // !*
        let y = randomIntFromRange(radius, canvas.height - radius); // !*
        const color = 'blue';

        if ( i != 0 ) { // Если идёт пересечение кругов, отрисуй в другом месте. 
            for (let j = 0; j < particles.length; j++ ) {
                if (getDistance(x, y, particles[j].x, particles[j].y) - radius * 2 < 0) {
                    x = randomIntFromRange(radius, canvas.width - radius); // !*
                    y = randomIntFromRange(radius, canvas.height - radius); // !*

                    j = -1;
                }
            }
        }

        particles.push (new Particle(x, y, radius, color))
    }
}

Отрисуем 4 круга, если идёт пересечение кругов, отрисовать этот круг в другом месте.

jsfiddle.net


function getDistance(x1, y1, x2, y2) { // расчёт дистанции до центра кругов
    let xDistance = x2 -x1; 
    let yDistance = y2 -y1; 

    let distance = Math.pow(xDistance, 2) + Math.pow(yDistance, 2); // Теорема Пифагора

    return Math.sqrt(distance); // квадратный корень числа
}

function init() { // точка входа
    particles = []; 
    //1
    for (let i = 0; i < 4; i++) { 
        let x = Math.random() * innerWidth;
        let y = Math.random() * innerHeight;
        const radius = 100;
        const color = 'blue';

        if ( i != 0 ) { // !* // Если идёт пересечение кругов, отрисуй в другом месте. 
            for (let j = 0; j < particles.length; j++ ) {
                if (getDistance(x, y, particles[j].x, particles[j].y) - radius * 2 < 0) {
                    x = Math.random() * innerWidth;
                    y = Math.random() * innerHeight;

                    j = -1;
                }
            }
        }

        particles.push (new Particle(x, y, radius, color))
    }
}

jsfiddle.net
Отрисуем 400 кружков

canvas = document.querySelector('#canvas');
let c = canvas.getContext('2d');

canvas.width = innerWidth;
canvas.height = innerHeight;

let mouse = {
    x: innerWidth / 2,
    y: innerHeight / 2
}

let colors = [
    '#2185c5',
    '#7ECEFD',
    '#FFF6E5',
    '#FF7F66'
];

document.addEventListener("mousemove", function(event){
    mouse.x = event.clientX;
    mouse.y = event.clientY;
});

addEventListener("resize", function(){
    console.log()
    canvas.width = innerWidth;
    canvas.height = innerHeight;
    // init();
});

function randomIntFromRange(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}

function randomColor (color){
    return color[Math.floor(Math.random() * color.length)];
}

addEventListener("click", function () {
    init();
})


function Particle (x, y, radius, color) { // шарик
    // 2
    this.x =x;
    this.y = y;
    this.radius = radius;
    this.color = color;

    this.update = function() {
        this.draw();
    }

    this.draw = function () {
        c.beginPath();
            c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
            c.fillStyle = this.color;
            c.fill();
            c.stroke();
        c.closePath();
    }
}

let particles; //!*

function init() { // точка входа
    particles = []; //!*
    //1
    for (let i = 0; i < 400; i++) { //!*
        const x = Math.random() * innerWidth;
        const y = Math.random() * innerHeight;
        const radius = 10;
        const color = 'blue';
        particles.push (new Particle(x, y, radius, color))
    }
}

function animate() {
    requestAnimationFrame(animate);
    c.clearRect(0,0, canvas.width, canvas.height);
    particles.forEach(object => { //!*
        object.update();
    })
}

init();
animate();

style.css

canvas {
    border: 1px solid #000;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas" width="300" height="300"></canvas>
    <script  src="canvas.js" ></script>
</body>
</html>

HTML5 Javascript Canvas Collision

Spsoi — Thu, 10 Feb 2022 07:47:08 +0000

Читать снизу вверх

Статья будет дополнятся

//!* новые строки
Вычисляем пересечение двух кругов
jsfiddle.net

function animate() {
    requestAnimationFrame(animate); // каждую секунду отрисовываем
    c.clearRect(0,0, canvas.width, canvas.height); // удаляем предыдуший отрисованный кадр
    circle1.update();
    circle2.x = mouse.x;
    circle2.y = mouse.y;
    circle2.update();

    let distance = getDistance(circle1.x, circle1.y, circle2.x, circle2.y); // !*
    let touch = circle1.radius + circle2.radius;// !*
    console.log( touch); // !*
    if (distance < touch) { // !*
        circle1.color = 'red'; 
    } else { 
        circle1.color = 'black';
    }
    console.log(getDistance(circle1.x, circle1.y, circle2.x, circle2.y)); 

}

Вычисляем расстояние курсора до центра первого шара (Чёрный).
jsfiddle.net

function getDistance(x1, y1, x2, y2) { //!* расчёт дистанции до центра первого круга
    let xDistance = x2 -x1; //!*
    let yDistance = y2 -y1; //!*

    let distance = Math.pow(xDistance, 2) + Math.pow(yDistance, 2); //!*// Теорема Пифагора

    return Math.sqrt(distance); //!*// квадратный корень числа
}

function animate() {
    requestAnimationFrame(animate); // каждую секунду отрисовываем
    c.clearRect(0,0, canvas.width, canvas.height); // удаляем предыдущий отрисованный кадр
    circle1.update();
    circle2.x = mouse.x;
    circle2.y = mouse.y;
    circle2.update();

    console.log(getDistance(circle1.x, circle1.y, circle2.x, circle2.y)); //!* 

}

Отрисуем второй шарик прям.
jsfiddle.net

let circle1 ;
let circle2 ; //!*
function init() { // точка входа
    //1
    circle1 = new Circle(300, 300, 100, 'black');
    circle2 = new Circle(undefined, undefined, 30, 'red'); //!*
}

function animate() {
    requestAnimationFrame(animate); // каждую секунду отрисовываем
    c.clearRect(0,0, canvas.width, canvas.height); // удаляем предыдущий от рисованный кадр
    circle1.update();
    circle2.x = mouse.x; //!*
    circle2.y = mouse.y; //!*
    circle2.update(); //!*
}

Отрисуем шар в центре канваса
jsfiddle.net

canvas = document.querySelector('#canvas');
let c = canvas.getContext('2d');

canvas.width = innerWidth;
canvas.height = innerHeight;

let mouse = {
    x: innerWidth / 2,
    y: innerHeight / 2
}

let colors = [
    '#2185c5',
    '#7ECEFD',
    '#FFF6E5',
    '#FF7F66'
];

document.addEventListener("mousemove", function(event){
    mouse.x = event.clientX;
    mouse.y = event.clientY;
});

addEventListener("resize", function(){ // при изменении окна растягиваем окно canvas
    canvas.width = innerWidth;
    canvas.height = innerHeight;
    // init();
});

function randomIntFromRange(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}

function randomColor (color){
    return color[Math.floor(Math.random() * color.length)];
}

addEventListener("click", function () { // клик по экрану сбрасывает анимацию
    init();
})


function Circle (x, y, radius, color) { // шарик
    // 2
    this.x =x;
    this.y = y;
    this.radius = radius;
    this.color = color;

    this.update = function() {
        this.draw();
    }

    this.draw = function () {
        c.beginPath();
            c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
            c.fillStyle = this.color;
            c.fill();
            c.stroke();
        c.closePath();
    }
}

let ballArray;
let circle1 ;
function init() { // точка входа
    //1
    circle1 = new Circle(300, 300, 100, 'black');
}

function animate() {
    requestAnimationFrame(animate); // каждую секунду отрисовываем
    c.clearRect(0,0, canvas.width, canvas.height); // удаляем предыдуший отрисованный кадр
    circle1.update();
}

init();
animate();

style.css

canvas {
    border: 1px solid #000;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas" width="300" height="300"></canvas>
    <script  src="canvas.js" ></script>
</body>
</html>

HTML5 Javascript Canvas Gravity

Spsoi — Wed, 09 Feb 2022 12:04:50 +0000

Читать снизу вверх

jsfiddle.net

Включаем гравитацию.

function Ball (x, y, dy, radius, color) { // шарик
    // 2
    this.x =x;
    this.y = y;
    this.dy = dy; // скорость падения вниз
    this.radius = radius;
    this.color = color;

    this.update = function() {
        if (this.y + this.radius > canvas.height) { // отскок
            this.dy = -this.dy * friction;
        }else {
            this.dy += gravity; // гравитация от 0.0 до 1.0
        }
        this.y += this.dy;
        this.draw();
    }

    this.draw = function () {
        c.beginPath();
            c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
            c.fillStyle = this.color;
            c.fill();
        c.closePath();
    }
}

jsfiddle.net
Отскок от края

function Ball (x, y, dy, radius, color) { // шарик
    // 2
    this.x =x;
    this.y = y;
    this.dy = dy; // скорость падения вниз
    this.radius = radius;
    this.color = color;

    this.update = function() {
        if (this.y + this.radius > canvas.height) { // отскок
            this.dy = -this.dy;
        }
        this.y += this.dy;
        this.draw();
    }

    this.draw = function () {
        c.beginPath();
            c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
            c.fillStyle = this.color;
            c.fill();
        c.closePath();
    }
}

jsfiddle.net
Заставим его падать

function Ball (x, y, dy, radius, color) { // шарик
    // 2
    this.x =x;
    this.y = y;
    this.dy = dy; // скорость падения вниз
    this.radius = radius;
    this.color = color;

    this.update = function() {
        this.y += this.dy;
        this.draw();
    }

    this.draw = function () {
        c.beginPath();
            c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
            c.fillStyle = this.color;
            c.fill();
        c.closePath();
    }
}

let ball;
function init() { // точка входа
    // 1
    ball = new Ball (canvas.width / 2, canvas.height / 2, 10, 30, 'red');
}

jsfiddle.net

Нарисуем а центре красный круг

canvas = document.querySelector('#canvas');
let c = canvas.getContext('2d');

let mouse = {
    x: innerWidth / 2,
    y: innerHeight / 2
}

document.addEventListener("mousemove", function(event){
    mouse.x = event.clientX;
    mouse.y = event.clientY;
});

function Ball (x, y, radius, color) { // шарик
    // 2
    this.x =x;
    this.y = y;
    this.radius = radius;
    this.color = color;

    this.update = function() {
        this.draw();
    }

    this.draw = function () { // рисуй
        c.beginPath();
            c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
            c.fillStyle = this.color;
            c.fill();
        c.closePath();
    }
}

let ball;
function init() { // точка входа
    // 1
    ball = new Ball (canvas.width / 2, canvas.height / 2, 30, 'red');
}

function animate() {
    console.log(mouse.x);
    console.log(mouse.y);
    c.clearRect(0,0, canvas.width, canvas.height);
    ball.update(); 
    requestAnimationFrame(animate);
}

init();
animate();

jsfiddle.net
Цепляем текст к курсору

canvas = document.querySelector('#canvas');
let c = canvas.getContext('2d');

let mouse = {
    x: innerWidth / 2,
    y: innerHeight / 2
}

document.addEventListener("mousemove", function(event){
    mouse.x = event.clientX;
    mouse.y = event.clientY;
});
function animate() {
    console.log(mouse.x);
    console.log(mouse.y);
    c.clearRect(0,0, canvas.width, canvas.height);
    c.fillText("HTML CANVAS BOILERPLATE", mouse.x, mouse.y)
    requestAnimationFrame(animate);
}

animate();

style.css

canvas {
    border: 1px solid #000;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas" width="300" height="300"></canvas>
    <script  src="canvas.js" ></script>
</body>
</html>

Html5 Javascript Canvas Drag And Drop

Spsoi — Tue, 08 Feb 2022 14:51:16 +0000

Смотреть снизу вверх

jsfiddle.net
Финал

let ctx = null;
let elementClick = null;
let x_before;
let y_before;
let elements = [ // элементы для отрисовки
    {
        name: '1',
        color: 'blue',
        width: 100,
        height: 100,
        top: 20,
        left: 15
    },
    {
        name: '2',
        color: 'red',
        width: 100,
        height: 100,
        top: 50,
        left: 125
    },
    {
        name: '3',
        color: 'yellow',
        width: 100,
        height: 100,
        top: 150,
        left: 185
    },
    {
        name: '4',
        color: 'green',
        width: 100,
        height: 100,
        top: 300,
        left: 235
    },
];



function releaseMouseButton () { // отпускаем мышку
    // 5
    elementClick = null;
}

function moveRect (event) { // постоянно отрисовываем
    // 4
    if (elementClick == null) {return}
    let infoPos = canvas.getBoundingClientRect(); // возвращает размер элемента и его позицию относительно viewport 
    x_click = event.clientX - infoPos.left; // пиксель по x внутри тэга canvas на который нажали
    y_click = event.clientY - infoPos.top; // пиксель по y внутри тэга canvas на который нажали
    desplX = x_click - x_before;
    desplY = y_click - y_before;
    elementClick.left =  elementClick.left + desplX;
    elementClick.top = elementClick.top + desplY;
    x_before = x_click;
    y_before = y_click;
    window.requestAnimationFrame(draw);
}

function clickByRect (event) { // отслеживаем клик по элементу
    // 3
    let x_click;
    let y_click;
    let infoPos = canvas.getBoundingClientRect(); // возвращает размер элемента и его позицию относительно viewport 
    x_click = event.clientX - infoPos.left; // пиксель по x внутри тэга canvas на который нажали
    y_click = event.clientY - infoPos.top; // пиксель по y внутри тэга canvas на который нажали
    x_before = x_click;
    y_before = y_click;
    console.log(x_click);
    console.log(y_click);
    elementClick = null;

    elements.forEach ( function (element) {

        x_final = element.left + element.width; // правый край элемента по x
        y_final = element.top + element.height; // низ края элемента по y

        if ( (x_click > element.left) && (x_click < x_final) && 
            (y_click > element.top) && (y_click < y_final) ) 
        {
            elementClick = element;
        }

    });
}

function draw () {
    // 2
    canvas = document.getElementById('tutorial');
        let infoPos = canvas.getBoundingClientRect(); // возвращает размер элемента и его позицию относительно viewport 
        let width = infoPos.width; // получаем ширину элемента
        let height = infoPos.height; // получаем ширину высоту
        ctx.clearRect(0, 0, width, height); // стираем прошлый кадр
        elements.forEach (function(element){ // отрисовка элемента
            ctx.fillStyle = element.color;
            ctx.fillRect(element.left, element.top, element.width, element.height);
        });
}

function initialization() { // точка входа
    // 1
    canvas = document.getElementById('tutorial'); // Получаем тэг Канвас
    canvas.addEventListener('mousedown', clickByRect);
    canvas.addEventListener('mousemove', moveRect);
    canvas.addEventListener('mouseup', releaseMouseButton);
    if (canvas.getContext) { // проверка
        ctx = canvas.getContext('2d');
        draw();
    }
}

initialization();

jsfiddle.net

Добавим функцию для отслеживания кликов по элементам.

function clickByRect (event) { // отслеживаем клик по элементу
    let x_click;
    let y_click;
    let infoPos = canvas.getBoundingClientRect(); // возвращает размер элемента и его позицию относительно viewport 
    x_click = event.clientX - infoPos.left; // пиксель по x внутри тэга canvas на который нажали
    y_click = event.clientY - infoPos.top; // пиксель по y внутри тэга canvas на который нажали
    console.log(x_click);
    console.log(y_click);
    let elementClick = null;

    elements.forEach ( function (element) {

        x_final = element.left + element.width; // правый край элемента по x
        y_final = element.top + element.height; // низ края элемента по y

        if ( (x_click > element.left) && (x_click < x_final) && 
            (y_click > element.top) && (y_click < y_final) ) 
        {
            elementClick = element;
        }

        if (elementClick != null) {
            alert(x_click + ' ' + y_click);
        }
    });
}
function initialization() { // точка входа
    canvas = document.getElementById('tutorial'); // Получаем тэг Канвас
    canvas.addEventListener('click', clickByRect); // Вешаем событие и врубаем функцию
    if (canvas.getContext) { // проверка
        ctx = canvas.getContext('2d');
        draw();
    }
}

jsfiddle.net
Отрисуем четыре элемента

let ctx = null;
let elements = [ // элементы для отрисовки
    {
        name: '1',
        color: 'blue',
        width: 100,
        height: 100,
        top: 20,
        left: 15
    },
    {
        name: '2',
        color: 'red',
        width: 100,
        height: 100,
        top: 50,
        left: 125
    },
    {
        name: '3',
        color: 'yellow',
        width: 100,
        height: 100,
        top: 150,
        left: 185
    },
    {
        name: '4',
        color: 'green',
        width: 100,
        height: 100,
        top: 300,
        left: 235
    },
];


function initialization() { // точка входа
    canvas = document.getElementById('tutorial'); // Получаем тэг Канвас
    if (canvas.getContext) { // проверка
        ctx = canvas.getContext('2d');
        draw();
    }

}

function draw () {
    canvas = document.getElementById('tutorial');
        elements.forEach (function(element){ // отрисовка элемента
            ctx.fillStyle = element.color;
            ctx.fillRect(element.left, element.top, element.width, element.height);
        });
}
initialization();

jsfiddle.net

function initialization() { // точка входа

    canvas = document.getElementById('tutorial'); // Получаем тэг Канвас

    canvas.addEventListener('click', function (event){ // вешаем эвент на всё окно канваса
        let infoPos = canvas.getBoundingClientRect();
        console.log(infoPos.left);
        console.log(event.clientX); //левый край окна браузера
        console.log(infoPos.top);
        console.log(event.clientY); //верхний край окна браузера
        let xpos = event.clientX - infoPos.left;
        console.log(xpos); // координаты пикселя x в окне canvas, на который нажали
        let ypos = event.clientY - infoPos.top;
        console.log(ypos); // координаты пикселя y в окне canvas, на который нажали
    });
}
initialization();

canvas{
    border: 1px solid black;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <canvas id ="tutorial" width="200" height="200"></canvas>
    <script src="canvas.js"></script>
</body>
</html>

Server Ubuntu настройка сервера

Spsoi — Tue, 08 Feb 2022 06:45:58 +0000

Шаг 1 — Вход с привилегиями root

ssh root@your_server_ip

Шаг 2 — Создание нового пользователя

# adduser user

Шаг 3 — Предоставление административных прав

# usermod -aG sudo user

продолжение следует по мере понимания :)

Ajax Fetch

Spsoi — Wed, 02 Feb 2022 11:42:20 +0000

var $ajaxResponse = null; // глобальная переменная
const ConstructorAjax = function(url, method, async = true, data = []) {
    $ajaxResponse = null;
    let body = {};
    body.url = url;
    body.async = async;
    body.type = method;
    body.dataType = "json";
    if (method == 'POST' || method == 'PUT' || method == 'PATCH' || method == 'DELETE') {
        body.data = data;
    }
    body.success = function(response) {
        console.log(response);
        $ajaxResponse = response;
        return response;
    }
    body.error = function(xhr, ajaxOptions, thrownError) {
        console.log(xhr);
        console.log(ajaxOptions);
        console.log(thrownError);
    }
    console.log(body);
    return $.ajax(body);
}

Html5 Canvas

Spsoi — Tue, 01 Feb 2022 14:05:15 +0000

index.html

<body>
    <canvas></canvas>
    <script src="canvas.js"></script>
</body>

canvas.js

var canvas = document.querySelector('canvas');

canvas.width = window.innerWidth; // установим ширину canvas равную ширине окна
canvas.height = window.innerHeight; // установим высоту canvas равную высоте окна

var c = canvas.getContext('2d');

c.fillStyle = 'rgba(255,0,0,0.5)'; // задать квадратам цвет и прозрачность
c.fillRect(100, 200, 100, 100); // Квадрат, left=x=100, top=y=200, width = 100, height = 100
c.fillStyle = 'rgba(0,0,255,0.5)'; // переопределим цвет для двух оставшихся
c.fillRect(200, 400, 100, 100); // Квадрат, left=x=100, top=y=200, width = 100, height = 100
c.fillRect(300, 500, 100, 100); // Квадрат, left=x=100, top=y=200, width = 100, height = 100
console.log(canvas);

style.css

canvas {
    border: 1px solid black;
    /* height: 100%;
    width: 100%; */
}

body { // убираем отступы для канваса
    margin: 0;
}

Line

c.beginPath(); // старт рисования
c.moveTo(50, 300); // x , y точка старта (невидимая)
c.lineTo(300, 100); // x , y отрисовать линию (невидимая)
c.lineTo(400, 300); // x , y отрисовать линию (невидимая)
c.strokeStyle = "#fa34a3"; // как css
c.stroke(); // сделать видимым moveTo, lineTo

Arc - Circle

// arc
c.beginPath(); // старт рисования Если без него, будет соединение с последней точкий.
c.arc(
    300, // x
    300, // y
    30, // raduis
    0, //startAngle
    Math.PI * 2, //endAngle
    false
)
c.strokeStyle = 'blue'; // покрасим края
c.stroke(); // сделать видимым c.arc

// arc
Отрисуем три круга.
Умножим случайное число на ширину экрана

let x = Math.random() * window.innerWidth;

Умножим случайное число на высоту экрана

let y = Math.random()* window.innerHeight;

for (let i = 0; i < 3; i++) {
    let x = Math.random() * window.innerWidth;
    let y = Math.random() * window.innerHeight;
    c.beginPath(); // старт рисования Если без него, будет соединение с последней точкой.
    c.arc(
        x, // x
        y, // y
        30, // raduis
        0, //startAngle
        Math.PI * 2, //endAngle
        false
    )
    c.strokeStyle = 'blue'; // покрасим края
    c.stroke(); // сделать видимым c.arc
}

Animation Canvas

Берём уже написанный код.

    c.beginPath(); // старт рисования Если без него, будет соединение с последней точки.
    c.arc(
       200, // x
        200, // y
        30, // raduis
        0, //startAngle
        Math.PI * 2, //endAngle
        false
    )
    c.strokeStyle = 'blue'; // покрасим края
    c.stroke(); // сделать видимым c.arc

function рекурсия

function animate () {
    requestAnimationFrame(animate); // рекурсия
}

Объединяем

 let x = 200;
function animate () {
    requestAnimationFrame(animate); // рекурсия
    c.beginPath(); // старт рисования Если без него, будет соединение с последней точки.
    c.arc(
        x, // x
        200, // y
        30, // raduis
        0, //startAngle
        Math.PI * 2, //endAngle
        false
    )
    c.strokeStyle = 'blue'; // покрасим края
    c.stroke(); // сделать видимым c.arc
    x += 1;
}

Вызываем

animate();

Получаем

Через секунду

Чистим ранее нарисованные кадры.

c.clearRect(0,0, innerWidth, innerHeight); // Стираем ранее нарисованный кадр

Код.

let x = 200;
function animate () {
    requestAnimationFrame(animate); // рекурсия
///////////////////////////////////////////////
    c.clearRect(0,0, innerWidth, innerHeight); // Стираем ранее нарисованный кадр
///////////////////////////////////////////////
    c.beginPath(); // старт рисования Если без него, будет соединение с последней точки.
    c.arc(
        x, // x
        200, // y
        30, // raduis
        0, //startAngle
        Math.PI * 2, //endAngle
        false
    )
    c.strokeStyle = 'blue'; // покрасим края
    c.stroke(); // сделать видимым c.arc
    x += 1;
}

Отскок от края экрана

let x = 200;
let dx = 10;
function animate () {
    requestAnimationFrame(animate); // рекурсия
    c.clearRect(0,0, innerWidth, innerHeight); // Стираем ранее нарисованный кадр
    c.beginPath(); // старт рисования Если без него, будет соединение с последней точки.
    c.arc(
        x, // x
        200, // y
        30, // raduis
        0, //startAngle
        Math.PI * 2, //endAngle
        false
    )
//////////////////////////////////////////////////////
    if (x > innerWidth) {
        dx = -dx;
    }
/////////////////////////////////////////////////////
    c.strokeStyle = 'blue'; // покрасим края
    c.stroke(); // сделать видимым c.arc
    x += dx;
}

animate();

Отскок от правого или левого края экрана.

let x = 200; // 
let y = 200;
let dx = 10; // скорость x
let radius = 30;
function animate () {
    requestAnimationFrame(animate); // рекурсия
    c.clearRect(0,0, innerWidth, innerHeight); // Стираем ранее нарисованный кадр
    c.beginPath(); // старт рисования Если без него, будет соединение с последней точки.
    c.arc(
        x, // x
        y, // y
        radius,
        0, //startAngle
        Math.PI * 2, //endAngle
        false
    )
/////////////////////////////////////////////////////////////
    if (x + radius > innerWidth || x - radius < 0) {
        dx = -dx;
    }
/////////////////////////////////////////////////////////////
    c.strokeStyle = 'blue'; // покрасим края
    c.stroke(); // сделать видимым c.arc
    x += dx;
}

animate();

Отскок от всех границ экрана

let x = 200; // координаты x
let y = 200; // координаты y
let dx = 10; // скорость x
let dy = 10; // скорость y
let radius = 30;
function animate () {
    requestAnimationFrame(animate); // рекурсия
    c.clearRect(0,0, innerWidth, innerHeight); // Стираем ранее нарисованный кадр
    c.beginPath(); // старт рисования Если без него, будет соединение с последней точки.
    c.arc(x, y, radius,0, Math.PI * 2, false);
    if (x + radius > innerWidth || x - radius < 0) {
        dx = -dx;
    }

//////////////////////////////////////////////////////////
    if (y + radius > innerHeight || y - radius < 0) {
        dy = -dy;
    }
//////////////////////////////////////////////////////////
    c.strokeStyle = 'blue'; // покрасим края
    c.stroke(); // сделать видимым c.arc
    x += dx;
    y += dy;
}

animate();

Случайное начало координат и скорость.

//////////////////////////////////////////////////
let x = Math.random() * innerWidth; // координаты x
let y =  Math.random() * innerHeight; // координаты y
let dx = (Math.random() - 0.5) * 10; // скорость x
let dy = (Math.random() - 0.5) * 10; // скорость y
/////////////////////////////////////////////////
let radius = 30;
function animate () {
    requestAnimationFrame(animate); // рекурсия
    c.clearRect(0,0, innerWidth, innerHeight); // Стираем ранее нарисованный кадр
    c.beginPath(); // старт рисования Если без него, будет соединение с последней точки.
    c.arc(x, y, radius,0, Math.PI * 2, false);

    if (x + radius > innerWidth || x - radius < 0) {
        dx = -dx;
    }
    if (y + radius > innerHeight || y - radius < 0) {
        dy = -dy;
    }
    c.strokeStyle = 'blue'; // покрасим края
    c.stroke(); // сделать видимым c.arc
    x += dx;
    y += dy;
}

animate();

Теперь refactoring code

var canvas = document.querySelector('canvas');

canvas.width = window.innerWidth; // установим ширину canvas равную ширине окна
canvas.height = window.innerHeight; // установим высоту canvas равную высоте окна

var c = canvas.getContext('2d');

function Circle (x , y, dx, dy, radius) {
    this.x = x;
    this.y = y;
    this.dx = dx;
    this.dy = dy;
    this.radius = radius;

    this.draw = function () {
        c.beginPath(); // старт рисования Если без него, будет соединение с последней точки.
        c.arc(this.x, this.y, this.radius,0, Math.PI * 2, false);
        c.strokeStyle = 'blue'; // покрасим края
        c.stroke(); // сделать видимым c.arc
    }
    this.update = function () {
        if (this.x + this.radius > innerWidth || this.x - this.radius < 0) {
            this.dx = -this.dx;
        }
        if (this.y + this.radius > innerHeight || this.y - this.radius < 0) {
            this.dy = -this.dy;
        }

        this.x += this.dx;
        this.y += this.dy;

        this.draw();
    }
}

let circleArray = [];

for (let i = 0; i < 2000; i++) {
    let radius = 30;
    let x = Math.random() * (innerWidth - radius * 2)+ radius; // координаты x
    let y =  Math.random() * (innerHeight - radius * 2) + radius; // координаты y
    let dx = (Math.random() - 0.5) * 3; // скорость x
    let dy = (Math.random() - 0.5) * 3; // скорость y
    circleArray.push( new Circle(x, y, dx, dy, radius ));
}


function animate () {
    requestAnimationFrame(animate); // рекурсия
    c.clearRect(0,0, innerWidth, innerHeight); // Стираем ранее нарисованный кадр

    for (let k = 0; k < circleArray.length; k++) {
        circleArray[k].update();
    }
}

animate();

Cron Job

Spsoi — Mon, 31 Jan 2022 17:13:12 +0000

crontab -e

Создать очередь

59 7 * * * /usr/bin/php7.4 /home/admin/web/host.com/public_html/index.php /route/rout/rou >/dev/null 2>&1

Создать очередь через Hestia или Vesta

php -d max_execution_time=60 -f /home/admin/web/host.com/public_html/index.php /route/rout/rou >/dev/null 2>&1

Выполнить очередь

* * * * * /usr/bin/php7.4 /home/admin/web/host.com/public_html/index.php /queue/process >/dev/null 2>&1

CLI
Пробрасываем роут в очередь cli

protected function cli(\Components\Route $route)
    {
        $route->cli('/route/rout/rou', 'App\Controllers\folder\TESTController@method');
    }

YClients

Spsoi — Mon, 31 Jan 2022 10:22:06 +0000

Получить детали визита

https://api.yclients.com/api/v1/visit/details/{salon_id}/{record_id}/{visit_id}

{
  "success": true,
  "data": {
    "payment_transactions": [
      {
        "id": 6023813,
        "document_id": 8172806,
        "date": "2018-06-21 17:15:00",
        "type_id": 5,
        "expense_id": 5,
        "account_id": 32299,
        "amount": 10,
        "client_id": 4241492,
        "master_id": 0,
        "supplier_id": 0,
        "comment": "",
        "item_id": 1162679,
        "target_type_id": 1,
        "record_id": 13136569,
        "goods_transaction_id": 0,
        "expense": {
          "id": 5,
          "title": "Оказание услуг"
        },
        "account": {
          "id": 32299,
          "title": "Депозиты (оплата наличными)"
        },
        "client": {
          "id": "4241492",
          "name": "ModulKassaClient",
          "phone": "71001001011"
        },
        "master": [],
        "supplier": []
      }
    ],
    "loyalty_transactions": [
      {
        "id": 10614,
        "status_id": 1,
        "amount": 0.5,
        "type_id": 2,
        "program_id": 145,
        "card_id": 20013,
        "salon_group_id": 646,
        "item_id": 0,
        "item_type_id": 0,
        "item_record_id": 0,
        "goods_transaction_id": 0,
        "is_discount": false,
        "is_loyalty_withdraw": false,
        "type": {
          "id": 2,
          "title": "Начисление по программам лояльности"
        }
      }
    ],
    "kkm_transaction_details_container": {
      "last_operation_type": 0,
      "transactions": [
        {
          "id": 1047,
          "print_date": "2018-06-25 00:45:31",
          "printed_count": 1,
          "sum": 13,
          "type": {
            "id": 0,
            "title": "Операция продажи"
          },
          "status": {
            "id": 1,
            "title": "Успешно"
          },
          "document": {
            "id": 2045,
            "type": 7,
            "type_title": "Визит"
          },
          "cashier": {
            "id": 746310,
            "name": "Андрей Панов"
          }
        }
      ]
    },
    "items": [
      {
        "id": 0,
        "item_id": 1162679,
        "item_type_id": 1,
        "record_id": 13136569,
        "item_title": "Стрижка у ТОП-мастера",
        "amount": 2,
        "first_cost": 20,
        "manual_cost": 10,
        "discount": 50,
        "cost": 10,
        "master_id": 13136569,
        "good_id": 0,
        "service_id": 1162679,
        "event_id": 0,
        "is_service": 1, // это сервис
        "is_event": 0, // это событие ??
        "is_good": 0 // это товар
      }
    ]
  },
  "meta": []
}

AMOCRM TEST

Spsoi — Thu, 27 Jan 2022 14:55:26 +0000

<?php

namespace Classes\AmoCrm;

class AmoCrmClassCompany
{
    public $amo;

    public $phoneF = 173279;
    public $emailF = 173281;

    public function __construct() 
    {
        $this->amo = app('client')->crm();
        $this->l = logger('crm/AMOCRM');
    }


    public function companySearch($array)
    {
        $this->amoCRM = $array;
        $amo = $this->amo;
        $contact = null;
        if (!empty($this->amoCRM['phone'])) {
            $contacts = $amo->companies()->searchByPhone($this->amoCRM['phone']);
            if ($contact = $contacts->first()) {
                $contact->cf()->byId($this->emailF)->setValue($this->amoCRM['email'],'WORK');
                $contact->save();
                return $contact;
            }
        }

        if (!$contact && !empty($this->amoCRM['email'])) {
            if (filter_var($this->amoCRM['email'], FILTER_VALIDATE_EMAIL)) {
                $contacts = $amo->companies()->searchByEmail($this->amoCRM['email']);
                if ($contact = $contacts->first()) {
                    $contact->cf()->byId($this->phoneF)->setValue($this->amoCRM['phone'],'WORK');
                    $contact->save();
                    return $contact;
                }
            }
        }

        return false;
    }

    public function companyCreate()
    {
        $amo = $this->amo;
        if (!empty($this->amoCRM['companyName']) && !empty($this->amoCRM['phone'])) {
            $contact = $amo->companies()->create();
            $contact->responsible_user_id = $this->amoCRM['responsible_user_id'];
            $contact->name = $this->amoCRM['companyName'];
            if (isset($this->amoCRM['phone'])) {
                $contact->cf()->byId($this->phoneF)->setValue($this->amoCRM['phone'], 'WORK');
            }
            if (isset($this->amoCRM['email'])) {
                $contact->cf()->byId($this->emailF)->setValue($this->amoCRM['email'], 'WORK');
            }
            // Тип организации
            if (isset($this->amoCRM['type-object'])) {
                $contact->cf()->byId(177033)->setValue($this->amoCRM['type-object']);
            }


            $contact->save();
            return $contact;
        }  
    }

    public function contactCreate($entity, $data)
    {
        $this->amoCRM = $data;
        $amo = $this->amo;
            $contact = $entity->createContact();
            $contact->responsible_user_id = $this->amoCRM['responsible_user_id'];
            $contact->name = $this->amoCRM['contactName'];
            $contact->save();
            return $contact;
    }
}