Несколько изображений / слоев на холсте

Question

Несколько изображений / слоев на холсте

0

У меня есть холст, что я добавляю фоновое изображение из моего источника в Html, затем вставляю изображения с моего локального компьютера и добавляю текст к изображению, я могу перемещать/поворачивать изображение и текст без проблем. Я хочу иметь возможность перемещать загруженное изображение и текст назад и перед фоновым изображением, я не могу найти решение, я думаю, что он включает в себя несколько слоев холста или что-то в этом роде. Может кто-нибудь предложит способ сделать это?

        <div class="well" style="height:350px;"> 
        <a name="1"><center>Sonstiges</center></a>
        <div class="cleaner_h3"></div>
        <img style="cursor:pointer;width:90px;height:120px;" class="img-polaroid" src="img/phones/designs/son01r.png">
        <img style="cursor:pointer;width:90px;height:120px;" class="img-polaroid" src="img/phones/designs/son02r.png">
        <img style="cursor:pointer;width:90px;height:120px;" class="img-polaroid" src="img/phones/designs/son09.png">
        <img style="cursor:pointer;width:90px;height:120px;" class="img-polaroid" src="img/phones/designs/son04p.png">
        <img style="cursor:pointer;width:90px;height:120px;" class="img-polaroid" src="img/phones/designs/son05p.png">
        </div>

    Jquery portion where I add the background image

        $(".img-polaroid").click(function(e){
                    var el = e.target;          
                    var design = $(this).attr("src");      //src is the particular image you click on
                    $('#tcanvas').css({


                        'backgroundImage': 'url(' + design +')',
                        'backgroundRepeat': 'no-repeat',
                        'backgroundPosition': 'top center',
                        'background-size': '100% 100%'



                                        });
            }); 


  Canvas element

      <div id="phoneDiv" class="page" style="width: 800px; height: 800px; position: relative;left:5%; background-color: rgb(255, 255, 255);"> 
        <canvas id="tcanvas" width=800 height="800" class="hover" style="-webkit-user-select: none;"></canvas>


    </div>

user1630140 20 фев. 2014, в 13:38

Источник

Теги:

javascript

jquery

html5

canvas

fabricjs

1 ответ

Ещё вопросы

markE · Answer 1 · 2014-02-20T18-08-00.000Z

Проблема:

У вас есть существующее изображение на холсте, и вы хотите нарисовать другое изображение за существующим изображением.

Вы можете использовать context.globalCompositeOperation = "destination-over", чтобы вызывать последующий чертеж "под" существующим контентом.

Случается, что любые существующие непрозрачные пиксели на холсте останутся, а новое изображение будет рисоваться только в прозрачные пиксели.

Поэтому нарисуйте эту стенную рамку с прозрачными пикселями внутри рамки:

context.drawImage(backgroundImage,0,0);

Затем установите композицию в "destination-over"

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

context.globalCompositeOperation="destination-over";

Затем нарисуйте второе изображение:

Город будет "зарисован" за существующим изображением (благодаря компоновке):

context.drawImage(cityImage,0,0);