Найти точное положение полотна fabricjs - PullRequest
Новая
       7

Найти точное положение полотна fabricjs

0 голосов
/ 30 апреля 2019

Я ищу точное положение холста в ткани. Например, у меня есть несколько зарегистрированных с помощью мыши вашего события: вверх, что позволяет мне узнать «верх» и «лево», но мой клиент спрашивает меня, что нет корабля «boat = canvas», это другой корабль. тогда я должен подтвердить положение всех остальных и сказать, занято это место или нет. но мои лодки имеют истинное вращение, которое влияет на верхнюю и левую стороны.

например, если я хочу узнать пространство моего созданного объекта, я должен только искать слева + ширина моей лодки. Да, и если это сработает, но если я верну его на свою лодку, левые изменения будут в том же положении, тогда уже левый + ширина не работает, будет левый - широкий.

То же самое происходит с верхом и не учитывается, когда лодка имеет наклон.

Можно ли сделать что-нибудь попроще? Это будет то, что вы можете мне помочь. Я оставлю фото моего проекта.

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

Agg_barcos:function(canvas) {


    this.barcos.forEach(function(item){

    if(item.categoria == "CAT"){
     this.img = '{{asset('img/1x/barco-verde.png')}}';
    }

    else if(item.categoria == "SAILING YACHT"){
     this.img = '{{asset('img/1x/barco-rosa.png')}}';
    }
    else if(item.categoria == "MOTOR YACHT"){
     this.img = '{{asset('img/1x/barco-azul.png')}}';
    }
    else if(item.categoria == "PESCA"){
     this.img = '{{asset('img/1x/barco-meta.png')}}';
    }
    else if(item.categoria == "ELEMENTO"){
     this.img = '{{asset('img/1x/barco-naranja.png')}}';
    }
    else if(item.categoria == "TENDER"){
     this.img = '{{asset('img/1x/barco-rojo.png')}}';
    }


    fabric.Image.fromURL(this.img, function(img) {
    img.set({left: 0,
    top: 0, lockUniScaling: true, 
    originX: 'center', originY: 'center'});
    img.scaleToHeight(item.largo);
    img.scaleToWidth(item.ancho);

    const barco =  new fabric.Text('  '+'  '+'  '+'  '+ item.cliente + '    ',{
    textAlign: 'center',
    lineHeight: 1,
    fontSize: 12,
    padding: 8,
    editable: false, 
    fontFamily:'Roboto',
    fill: '#fff',
    fontWeight: "normal",
    fixedWidth: item.ancho - 10,
    width: item.ancho - 10, 
    });

    if (barco.width > barco.fixedWidth) {
    barco.fontSize *= barco.fixedWidth/(barco.width +1);
    barco.width = barco.fixedWidth
    }

    const group = new fabric.Group([img, barco], {
    id: item.id, 
    left: item.left,
    top: item.top, 
    id: item.id,

    width: item.ancho,
    angle: item.angulo,
    fixedWidth: item.ancho,
    multiplier:10,

    });



    group.setControlsVisibility({
    bl: false,
    br: false,
    tl: false,
    tr: false,
    mt: false,
    mb: false,
    ml: false,
    mr: false,
    });

    canvas.add(group);
     });

    });

    canvas.on('object:rotated', function(e){
     console.log("hola modified" , e);
    });



    canvas.on('mouse:dblclick', function(e){
    $(".sider").css("width", "330px");
    $(".sider").css("transition", "0.5s");
    $(".sider").css("left", "0px");

    if (e.target) {
    if (e.target.id) {

    var url = '/mostrar/barco/' + e.target.id;
    axios.get(url).then((response) => {
        let barco = response.data;
        vm.Mostrar(barco);
        console.log("si esta pasando");
    })


    }

    }




    });



    canvas.on('mouse:up', function(e) {
    console.log(e);

    if (e.target) {
    if (e.target.id) {
        var id = e.target.id;
        var barco = e.target 
        vm.actualizarBarco(id, barco);
        vm.verificarFecha(e.target.id);
    }
    }




    });

    },

IMG project

...