0

Задача: есть вертикальная линия со своими координатами, и есть концентрические круги разных цветов (как мишень в тире), нужно при перетаскивании кругов на линию менять цвет только той частички круга что находится за линией с помощью JS. Как перетаскивать объект с помощью JS, я знаю, помогите реализовать смену цвета.

3
  • 1
    я так думаю, для решения этой задачи, Вам нужен canvas
    – Dmytro
    Commented 21 мар. 2018 в 13:53
  • Я размышлял над canvas, но так и не понял как можно сменить цвет отдельным пикселям, а не всему элементу (например если рисовать круг, то при достижении нужных координат цвет менять будет весь круг, а не его часть вышедшая за указанный предел). Подскажите как это сделать, если знаете. Commented 27 мар. 2018 в 6:18
  • Я таких задач не решал, но думаю, что нужно определить все пиксели одного объекта и другого - все совпадающие закрасить в нужный цвет...если для этого, конечно, нет специального метода.
    – Dmytro
    Commented 27 мар. 2018 в 8:33

1 ответ 1

0

Почему нельзя просто попробовать и если что-то не получается, то спросить. Хотя бы попытаться. Все же.

План решения задачи:

  • Отрисовка круга
  • Передвижение круга
  • Сделать другим цвет в пересечение круга и линии

Отрисовка круга. Коментарии в 3 функции, так как она самая нормальная.

function drawCircle1(x,y, radius, stripesAmount, stripesColor, circleColor) {
    ctx.save()
    ctx.beginPath()
    ctx.fillStyle = circleColor       
    ctx.arc(x,y, radius+radius/4/stripesAmount, 0,Math.PI*2) 
    ctx.closePath();ctx.fill()

    var stripeWidth = radius/2/stripesAmount
    ctx.lineWidth = stripeWidth
    ctx.strokeStyle = stripesColor
    for(let rad=stripeWidth; rad < radius; rad += stripeWidth*2) {
        ctx.beginPath()
        ctx.arc(x,y, rad, 0,Math.PI*2)
        ctx.closePath();ctx.stroke()
    }
    ctx.restore()
}
function drawCircle2(x,y, radius, stripesAmount, stripesColor, circleColor) {
    ctx.beginPath()
    ctx.fillStyle = circleColor       
    ctx.arc(x,y, radius-radius/4/stripesAmount, 0,Math.PI*2) 
    ctx.closePath();ctx.fill()

    var stripeWidth = radius/2/stripesAmount
    ctx.lineWidth = stripeWidth
    ctx.strokeStyle = stripesColor
    for(let rad=stripeWidth*2; rad < radius; rad += stripeWidth*2) {
        ctx.beginPath()
        ctx.arc(x,y, rad, 0,Math.PI*2)
        ctx.closePath();ctx.stroke()
    }
}
function drawCircle3(x,y, radius, stripesAmount, stripesColor, circleColor) {
    ctx.save()
    // рисуем подложку в виде красного круга
    ctx.beginPath()
    ctx.fillStyle = circleColor       
    ctx.arc(x,y, radius, 0,Math.PI*2) 
    ctx.closePath();ctx.fill()

    // рисуем полоски, узнаем как их будем рисовать...
    // будем рисовать полоски через большую толщину линий(stroke...)
    var stripeWidth = radius/2/stripesAmount
    ctx.lineWidth = stripeWidth
    ctx.strokeStyle = stripesColor
    //рисуем сразу все полоски через цикл с готовым радиусом
    // если радиус поставим без / 2 то все полоски съедут на stripeWidth/2 и будет некрасиво
    for(let rad=stripeWidth/2; rad < radius; rad += stripeWidth*2) {
        ctx.beginPath()
        ctx.arc(x,y, rad, 0,Math.PI*2)
        ctx.closePath();ctx.stroke()
    }
    ctx.restore()
}
function drawCircle4(x,y, radius, stripesAmount, stripesColor, circleColor) {
    ctx.beginPath()
    ctx.fillStyle = circleColor       
    ctx.arc(x,y, radius, 0,Math.PI*2) 
    ctx.closePath();ctx.fill()

    var stripeWidth = radius/2/stripesAmount
    ctx.lineWidth = stripeWidth
    ctx.strokeStyle = stripesColor
    for(let rad=stripeWidth/2+stripeWidth; rad < radius; rad += stripeWidth*2) {
        ctx.beginPath()
        ctx.arc(x,y, rad, 0,Math.PI*2)
        ctx.closePath();ctx.stroke()
    }
}

Передвижение круга.

canv.addEventListener("mousedown", e=>{//стрелочная функция(this не используем значит ею можно воспользоваться)
    var drag = false;
    var dist, x,y;
    var circleX = circle.x
    var circleY = circle.y
    canv.onmousemove = e=> { //внутри евента при использовании другого евента можно использовать только onEvent, так как при использовании addEventListener функции будут накладываться сами на себя, но правда можно в конце написать deleteEventListener, но я привык так
        dist = getDist(e.pageX,e.pageY, circle.x,circle.y)
        if(dist < circle.radius && !drag) {
            drag = true; x=e.pageX;y=e.pageY;
        }
        if(drag) {
            circle.x = circleX + e.pageX-x
            circle.y = circleY + e.pageY-y
        }
    }
})
canv.addEventListener("mouseup", ()=>{
    canv.onmousemove = undefined; //убираем евент, чтобы он реагировал только, когда зажали мышку
})

Другой цвет.

function anim() {
    ctx.clearRect(0,0, w,h)

    drawCircle3(circle.x,circle.y, circle.radius, 5, '#fff', '#f00')
    //выбирай какой круг нравится, так как способов несколько
    // обьяснения в 3 круге, так как он самый нормальный для меня

    ctx.beginPath()
    ctx.moveTo(line.start.x, line.start.y)
    ctx.lineTo(line.end.x, line.end.y)
    ctx.closePath();ctx.stroke()

    ctx.save()
    ctx.beginPath()

    ctx.moveTo(0, line.start.y)
    ctx.lineTo(line.start.x, line.start.y)
    ctx.lineTo(line.end.x, line.end.y)
    ctx.lineTo(0, line.end.y)
    ctx.lineTo(0, line.start.y)

    //создали фигуру и обрезали ее, то есть то что мы будем рисовать, будет рисоваться только в той области, которую обрезали. Оно будет рисоваться только в том прямоугольнике.
    ctx.clip()

    // ну и рисуем в этой области
    //drawCircle3(circle.x,circle.y, circle.radius, 5, '#000', '#00f')
    drawCircle3(circle.x,circle.y, circle.radius, 5, '#f00', '#fff')

    ctx.restore()


    window.requestAnimationFrame(anim)
}
anim()

Все что не было упомянуто.

Канвас

<canvas id="canv" style="position: absolute;"></canvas>

Некоторые переменные, функции.

var canv = document.getElementById("canv"),
ctx = canv.getContext("2d"),
w = canv.width = window.innerWidth,
h = canv.height = window.innerHeight,
log = val=>console.log(val)
var und;

var circle = {
    radius: 150,
    x: w/2,
    y: h/2 // остальное не будем записывать так, как ипользуем их всего 1 раз(смысла нет)
}
var line = {
    start: {x:240, y:150},
    end: {x:240, y:400}
}

function getDist(x1,y1,x2,y2) {
    return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2)) // обычная функция получения расстояния
}
1

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.