什麼是寫轉置函數的有效方式

Konva.js是非常好的庫。如果你是某人爲圖書館提供捐助，那麼謝謝你。什麼是寫轉置函數的有效方式

我有一個情況要寫一個轉置函數。「轉置功能」是指兩種功能相同但方向不同 - 垂直和水平。

有關更多詳細信息，我需要編寫下面的自定義函數。

Konva.Group.prototype.verticalCut(position) 
Konva.Group.prototype.horizontalCut(position)  

Konva.Group.prototype.verticalShrink(direction, amount) 
Konva.Group.prototype.horizontalShrink(direction, amount) 

Konva.Group.prototype.verticalExpand(direction, amount) 
Konva.Group.prototype.horizontalExpand(direction, amount)

當然，組實例包含各種類型的子項。其實，我已經寫了verticalCut和horizontalCut函數。但是，如你所料，代碼幾乎是相同的，除了x，y和寬度，高度值。以下是我的代碼。

這是verticalCut功能

Konva.Group.prototype.verticalCut = function(pos) { 
    const woodGroup = this; 
    const wood = woodGroup.findOne('.wood'); 

    var relPos = { 
    x: pos.x/App.factor - woodGroup.x(), 
    y: pos.y/App.factor - woodGroup.y() 
    } 

    const lGroupPos = woodGroup.position(); 
    const lGroupSize = { 
    width : relPos.x, 
    height : wood.height() 
    } 

    const rGroupPos = { 
    x: woodGroup.x() + relPos.x, 
    y: woodGroup.position().y 
    } 
    const rGroupSize = { 
    width: wood.width() - relPos.x, 
    height: wood.height() 
    } 

    //woodGroup contains wood rectangle and width, height labels 
    const lGroup = makeWoodGroup(lGroupPos.x, lGroupPos.y, lGroupSize.width, lGroupSize.height); 
    const rGroup = makeWoodGroup(rGroupPos.x, rGroupPos.y, rGroupSize.width, rGroupSize.height); 

    App.woodLayer.add(lGroup).add(rGroup); 

    this.destroy(); 
    App.woodLayer.draw(); 

}

而且horizontalCut功能

Konva.Group.prototype.horizontalCut = function(pos) { 
    const woodGroup = this; 
    const wood = woodGroup.findOne('.wood'); 

    var relPos = { 
    x: pos.x/App.factor - woodGroup.x(), 
    y: pos.y/App.factor - woodGroup.y() 
    } 

    const uGroupPos = woodGroup.position(); 
    const uGroupSize = { 
    width : wood.width(), 
    height : relPos.y 
    } 

    const bGroupPos = { 
    x: woodGroup.position().x, 
    y: woodGroup.y() + relPos.y 
    } 
    const bGroupSize = { 
    width: wood.width(), 
    height: wood.height() - relPos.y 
    } 

    //woodGroup contains wood rectangle and width, height labels 
    const uGroup = makeWoodGroup(uGroupPos.x, uGroupPos.y, uGroupSize.width, uGroupSize.height); 
    const bGroup = makeWoodGroup(bGroupPos.x, bGroupPos.y, bGroupSize.width, bGroupSize.height); 

    const hEdge = makeCuttingEdge(hEdgeStartPos, hEdgeEndPos); 

    App.woodLayer.add(uGroup).add(bGroup); 

    this.destroy(); 
    App.woodLayer.draw(); 

}

哦........對不起的有掉電，存儲字節的浪費，使2你的時間複製代碼.....我不知道在編寫這些代碼時我是如何忍受痛苦的。當然，我還有4個（如果有2個）功能可以寫入。也許如果我犯了一個錯誤1部分，我必須糾正對函數中的相同錯誤。災害！！

解決此問題的最佳做法是什麼？

我的一個想法是在調用工作方法之前先做轉置功能並總是創建轉置實例。這樣，我只需要編寫一個水平方向功能。當我以垂直方式需要這項工作時，轉置我的實例屬性（x-> y，y-> x，w-> h，h-> w），調用水平函數並轉回。

這是安全使用？我有缺少的零件嗎？謝謝！

來源

2017-07-31 casamia

我想你想要的是變換函數。 Konvajs可能不會這樣做，但您可以隨時通過css3 transforms來轉換您擁有konvajs舞臺的div（或其他元素）。

來源

2017-07-31 10:52:23

什麼是寫轉置函數的有效方式

回答

相關問題