Триггерное событие для элемента SVG, который перемещается за другим? - PullRequest
Новая
       5

Триггерное событие для элемента SVG, который перемещается за другим?

0 голосов
/ 01 июня 2018

Например, желаемый результат: когда красный замаскированный прямоугольник движется за одним из «отверстий», отверстие должно изменить заливку (или какой-либо другой атрибут).

Можно ли добавитькакое-то событие, которое срабатывает, когда moving_rect входит / покидает область элемента отверстия?

в действии: https://jsfiddle.net/qwertasyx/n9v7L95j/

также здесь как фрагмент: 

var draw = SVG('myDrawing').size('100%',200);

var rect_group = draw.group()

//we dont want to see this
var background = rect_group.rect(200,150).center(250,100).fill('#000')
// we want too see through those 'holes'
var hole1 = rect_group.rect(40,40).center(290,70 ).fill('#fff')
var hole2 = rect_group.rect(40,40).center(290,130).fill('#fff')
var hole3 = rect_group.rect(40,40).center(220,70 ).fill('#fff')
var hole4 = rect_group.rect(40,40).center(220,130).fill('#fff')

// object that we see through the holes
var moving_rect = draw.rect(40,40).fill('red').center(250,100)

//mask obj 
var mask = draw.mask()
$('#mask').on('click',function(e){
	mask.add(rect_group)
  moving_rect.maskWith(mask)
})

$('#animate').on('click',function(e){    moving_rect.animate(250).move(160,40).animate(250).move(250,40).animate(250).move(300,80).animate(250).move(250,160).animate(250).center(250,100)
})
svg{
  border-style: solid;
  border-width: 1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.5/svg.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container-fluid">
  <div class="row">
    <div class="col-12">
    <h5>Example svg -> click button for animation </h5><button id="mask" class="btn btn-primary">mask rect</button> <button id="animate" class="btn btn-primary">animate</button>
    </div>
  </div>
</div>
<div class="container-fluid">
  <div class="row">
    <div class="col-12">
      <div id="myDrawing"></div>
    </div>
  </div>
</div>
<hr>

1 Ответ

0 голосов
/ 02 июня 2018

Итак, я собрал решение, где на каждом шаге анимации проверяется, пересекается ли один из прямоугольников (отверстий) с движущимся прямоугольником.Если обнаружено пересечение, оно меняет цвет заливки «дыр». 

    // animate()...
    .duringAll(function () {
        // get box of the rectangle
        var bbox = this.bbox()

        // intersection function. You should define it somewhere outside
        // instead of redefining every time
        var intersect = function(boxA, boxB) {
            return (boxA.x < boxB.x2 && boxA.x2 > boxB.x &&
            boxA.y < boxB.y2 && boxA.y2 > boxB.y) 
        }

        // go trough the boxes of every hole defined before
        boxes.forEach(function (el, index) {
            if(intersect(bbox, el)) {
                // change color of fill on intersection
                rects[index].fill('#555')
            } else {
                rects[index].fill('#fff')
            }
        })

    })

Рабочая скрипка: https://jsfiddle.net/Fuzzy/n9v7L95j/5/

Вместо этого было бы тривиально инициировать событие.Вы можете просто пойти: 

this.fire('intersection', {index: index})

// then bind with
moving_rect.on('intersection', function (ev) {
    var index = ev.detail.index

    // do somthing
    rects[index].fill('#333')
})
...