Архивы fabric.js

fabric.js подсказка при наведении мышки на обьект..

28.07.2015 Павел Грибов WEB

Странно, что такой полезной функции не оказалось в «коробке»…Ну да ничего. Решаемо.

function showImageTools (e) {
    data="<div id=imageDialog class='alert' style='z-index: 9999;position: absolute'>OLALA</div>";       
    if (!$('#imageDialog').length) {
        $("#saveweldingandmark").append(data);
    }
    moveImageTools(e);
};
function moveImageTools (e) {
    var w = $('#imageDialog').width();
    var h = $('#imageDialog').height();
    $('#imageDialog').show();
    $('#imageDialog').css({top: my, left: mx});
}
var MouseCoords = {
getX: function(e){
    if (e.pageX) {
            return e.pageX;
    } else 
        if (e.clientX) {
            return e.clientX+(document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
        }
    return 0;
    },
getY: function(e){
    if (e.pageY){
            return e.pageY;
    } else 
      if (e.clientY) {
            return e.clientY+(document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
      }
    return 0;
    }
};
document.onmousemove = function(e){
    if (!e) e = window.event;
    mx=MouseCoords.getX(e);
    my=MouseCoords.getY(e);
};
canvas.on('mouse:over', function (e) {
    console.log("Я на что-то наехал...");
    showImageTools(e.target);
});
canvas.on('mouse:out', function (e) {
    $('#imageDialog').remove();
});

function showImageTools (e) {

data="<div id=imageDialog class='alert' style='z-index: 9999;position: absolute'>OLALA</div>";

if (!$('#imageDialog').length) {

$("#saveweldingandmark").append(data);

}

moveImageTools(e);

};

function moveImageTools (e) {

var w = $('#imageDialog').width();

var h = $('#imageDialog').height();

$('#imageDialog').show();

$('#imageDialog').css({top: my, left: mx});

}

var MouseCoords = {

getX: function(e){

if (e.pageX) {

return e.pageX;

} else

if (e.clientX) {

return e.clientX+(document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;

}

return 0;

getY: function(e){

if (e.pageY){

return e.pageY;

} else

if (e.clientY) {

return e.clientY+(document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;

}

return 0;

}

};

document.onmousemove = function(e){

if (!e) e = window.event;

mx=MouseCoords.getX(e);

my=MouseCoords.getY(e);

};

canvas.on('mouse:over', function (e) {

console.log("Я на что-то наехал...");

showImageTools(e.target);

});

canvas.on('mouse:out', function (e) {

$('#imageDialog').remove();

});

Оставить комментарий fabric.js, fabricjs, hint, подсказка

Библиотека для работы с графикой на JavaScript

28.07.2015 Павел Грибов WEB

Последнее время активно работаю с библиотекой fabric.js, для работы с графикой на JavaScript, а именно делаю «редактор муфт»:

Библиотека позволяет на холсте canvas работать с графикой как с объектами: выделять, изменять, назначать обработчики событий (выделение, клик, перемещение и т.п.) для каждого объекта. Ну и еще много всего. В то-же время она достаточно проста в освоении.

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

1) Перебор всех объектов в canvas:

         canvas.forEachObject(function(obj) {    
          };

1 2	canvas.forEachObject(function(obj) { };

2) Для очистки canvas от всех объектов:

canvas.clear();

1	canvas.clear();

3) Закраска объекта градиентом:

              var rect = new fabric.Rect({left: 20,top: 0,fill: 'yellow',width: wx-40,height: steph,selectable:false,shadow: 'green 2px 2px 2px'});
                        rect.setGradient('fill', {x1: 0,y1: 0,x2: 0,y2:  rect.height,colorStops: {1: '#000',0: '#fff'}});              
                        canvas.add(rect);

var rect = new fabric.Rect({left: 20,top: 0,fill: 'yellow',width: wx-40,height: steph,selectable:false,shadow: 'green 2px 2px 2px'});

rect.setGradient('fill', {x1: 0,y1: 0,x2: 0,y2: rect.height,colorStops: {1: '#000',0: '#fff'}});

canvas.add(rect);

4) Назначение событий:

canvas.on('object:selected', function(e) {
    p = e.target;
// в p сейчас, обьект по которому "щелкнули"
 });

canvas.on('object:selected', function(e) {

p = e.target;

// в p сейчас, обьект по которому "щелкнули"

});

Оставить комментарий fabric.js, javascript

Пн	Вт	Ср	Чт	Пт	Сб	Вс
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30