kineticjs - mask/содержать изображения, так что нет перекрытия

У меня есть 2 изображения на моей сцене под оверлейным изображением из 2 кадров. Пользователь может перетаскивать каждое изображение так, как если бы они располагали каждое изображение внутри рамки фотографии. Проблема у меня есть это Yoda изображения в этом примере могут перекрываться и появляются внутри Вейдера рамы слева (и наоборот), как показано здесь:kineticjs - mask/содержать изображения, так что нет перекрытия

overlap example http://i39.tinypic.com/119xbv6.png

jsfiddle здесь:

http://jsfiddle.net/vTLkn/

Есть ли способ разместить изображения внутри какой-либо формы контейнера или прямоугольника, чтобы остановить это, чтобы они не отображались внутри другого «кадра»?

Заключительная страница может содержать до 5 или 6 кадров и изображений с каждым изображением, которое может быть увеличено или уменьшено, а также перетаскивается пользователем в любом месте, которое они хотят (я посмотрел на dragBoundsFunc, но я не знаю Фактически я хочу ограничить место, где они размещены, просто прекратите перекрытие.

Я также попытался использовать прямоугольник как маску изображения и изображение как атрибут fillPatternImage, но я не могу затем перетащить и масштабировать изображение внутри, Прямой прямоугольник.

источник

2013-07-18 odd_duck

Вы можете использовать Kinetic Group плюс «обрезку йоды», чтобы убедиться, что ваши изображения не пересекаются

enter image description here

Сначала нужно создать группу, которая будет содержать как фоторамку и Йоду:

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

var group=new Kinetic.Group({ 
     x:20, 
     y:20, 
     width:256, 
     height:256, 
     draggable:true 
    }) 
    layer.add(group);

Затем добавьте изображение Yoda, которое было обрезано, чтобы оно поместилось в рамку для картин.

Поскольку изображение Yoda в фоновом режиме (нижний индекс z), любое небольшое перекрытие с рамкой для изображения будет спрятано более широкой рамкой.

Здесь Йода будет больше, чем рамка для изображения, поэтому его нужно немного подрезать.

 var inner=new Kinetic.Image({ 
      image:Yoda, 
      x:44, 
      y:44, 
      width:168, 
      height:162, 
      crop:{ 
       x: 23, 
       y: 38, 
       width: 168, 
       height: 162 
      } 

     }); 
     group.add(inner);

Наконец, добавить рамку, которая будет масштабироваться, чтобы поместиться в группе с использованием ширина/высота:

 var outer=new Kinetic.Image({ 
      image:pictureFrame, 
      x:0, 
      y:0, 
      width:256, 
      height:256, 
     }); 
     group.add(outer);

Вот код и Fiddle: http://jsfiddle.net/m1erickson/qGHZn/

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Prototype</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.4.min.js"></script> 

<style> 
#container{ 
    border:solid 1px #ccc; 
    margin-top: 10px; 
    width:400px; 
    height:400px; 
} 
</style>   
<script> 
$(function(){ 

    var stage = new Kinetic.Stage({ 
     container: 'container', 
     width: 400, 
     height: 400 
    }); 
    var layer = new Kinetic.Layer(); 
    stage.add(layer); 

    var group=new Kinetic.Group({ 
     x:20, 
     y:20, 
     width:256, 
     height:256, 
     draggable:true 
    }) 
    layer.add(group); 

    ////////////////////////// 
    // START 
    ////////////////////////// 


var frame=new Image(); 
frame.onload=function(){ 

    var pic=new Image(); 
    pic.onload=function(){ 

     var inner=new Kinetic.Image({ 
      image:pic, 
      x:44, 
      y:44, 
      width:168, 
      height:162, 
      crop:{ 
       x: 23, 
       y: 38, 
       width: 168, 
       height: 162 
      } 

     }); 
     group.add(inner); 

     var outer=new Kinetic.Image({ 
      image:frame, 
      x:0, 
      y:0, 
      width:256, 
      height:256, 
     }); 
     group.add(outer); 

     layer.draw(); 
    } 
    pic.src="http://www.html5canvastutorials.com/demos/assets/yoda.jpg"; 

} 
frame.src="woodenframe.png"; 


}); // end $(function(){}); 

</script>  
</head> 

<body> 
    <div id="container"></div> 
</body> 
</html>

источник

2013-07-18 18:31:46 markE

спасибо подробный ответ markE, очень ценится. Единственная проблема заключается в том, что мне нужно, чтобы изображение yoda было перетаскивано и масштабировано на своем, а не на фрейм - рамка была бы неподвижной и устанавливалась в таком размере все время - мне нужно было бы перемещать и масштабировать yoda/darth изображения сами по себе ... любые идеи? –

, поэтому просто для того, чтобы уточнить, мне нужно иметь возможность размещать каждое изображение в неподвижной рамке, а не как изображение, так и изображение вместе - без какого-либо перекрытия. –

Хорошо, я немного смущен тем, что вам нужно. Вы хотите перетащить Йоду в любой пустой кадр из-за рамки рамки?Или вы хотите ограничить перепозиционирование целиком в пределах рамки - возможно, увидеть больше/меньше лица Йоды или легкой сабли? – markE

kineticjs - mask/содержать изображения, так что нет перекрытия

ответ

Смежные вопросы