Question

我正在寻找画布在织物中的确切位置。例如，我已经为您的事件鼠标注册了几个：上，让我知道“顶部”和“左侧”，但是我的客户问我没有船“ 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);
    }
    }




    });

    },

找到画布面料的确切位置

0 个答案: