0

在我正在处理的头像生成器的代码中，我有两个按钮事件处理程序方法，它们可以使角色的鼻子变小或变大。它们几乎包含相同的代码，我想修复（即干）

再往下你会看到我是如何将事件处理程序方法中的逻辑删除到一个新函数中的，但我不知道如何改变这个函数内部的实际逻辑，所以它要么使鼻子变小，要么变大。所以我基本上想要的是能够将 - 更改为 + 或其他方式，具体取决于是否从事件处理程序方法调用它以使鼻子变小或变大。

有什么建议么？

现在的代码：

smallerNoseBtn.on('click', function() {

    var nose = AvGen.noses.nose1;

    if (nose.size >= 0.3) {
        nose.x += 3, nose.y += 3;
        nose.size = nose.size -= 0.1;
        nose.size = Math.round(nose.size * 10) / 10;

        nose.noseObj.transform('S' + nose.size + ', ' + nose.size + ', 0, 0, T' + nose.x + ', ' + nose.y);
    }
});

biggerNoseBtn.on('click', function() {

    var nose = AvGen.noses.nose1;

    if (nose.size <= 1.8) {
        nose.x -= 3, nose.y -= 3;
        nose.size = nose.size += 0.1;
        nose.size = Math.round(nose.size * 10) / 10;

        nose.noseObj.transform('S' + nose.size + ', ' + nose.size + ', 0, 0, T' + nose.x + ', ' + nose.y);
    }

摆脱干燥：

smallerNoseBtn.on('click', function() {
    var nose = AvGen.noses.nose1;

    if (nose.size >= 0.3) {
        changeNoseSize(nose, 'smaller');
    }
});

biggerNoseBtn.on('click', function() {
    var nose = AvGen.noses.nose1;

    if (nose.size <= 1.8) {
        changeNoseSize(nose, 'bigger');
    }
});


// The question is what to write in the functions to make it possible to use the variable
// changeSize (which will contain of either 'bigger' or 'smaller')?  

function changeNoseSize(nose, changeSize) {
    nose.x -= 3, nose.y -= 3;
    nose.size = nose.size += 0.1;
    nose.size = Math.round(nose.size * 10) / 10;

    nose.noseObj.transform('S' + nose.size + ', ' + nose.size + ', 0, 0, T' + nose.x + ', ' + nose.y);
}
4

4 回答 4

1

You can pass coefficient instead of changeSize and then implement something like this:

function changeNoseSize(nose, k) {
    nose.x -= k * 3, nose.y -= k * 3;
    nose.size += -k * 0.1;
    nose.size = Math.round(nose.size * 10) / 10;

    nose.noseObj.transform('S' + nose.size + ', ' + nose.size + ', 0, 0, T' + nose.x + ', ' + nose.y);
}

Then you can pass 1 and -1 as k value.

于 2013-06-12T13:25:24.213 回答
1

You can do it just like that:

smallerNoseBtn.on('click', function() {
    if (nose.size >= 0.3) {
        changeNoseSize([-3, -0.1]);
    }
});

biggerNoseBtn.on('click', function() {
    if (nose.size <= 1.8) {
        changeNoseSize([3, 0.1]);
    }
});

function changeNoseSize(changeSize) {
    var nose = AvGen.noses.nose1;
    nose.x -= changeSize[0], nose.y -= changeSize[0];
    nose.size = nose.size += changeSize[1];
    nose.size = Math.round(nose.size * 10) / 10;

    nose.noseObj.transform('S' + nose.size + ', ' + nose.size + ', 0, 0, T' + nose.x + ', ' + nose.y);
}
于 2013-06-12T13:25:56.720 回答
1

一个简单的 if 检查 [三元运算符]，如果您应该增加或减少，它会设置一个变量。

var direction= changeSize==="bigger" ? 1 : -1;
var xyChange = 3 * direction;
nose.x += xyChange; 
nose.y += xyChange;
nose.size += 0.1 * direction;

就个人而言，我会朝 [-1/1] 方向而不是字符串传递。或在元素上使用数据属性。

于 2013-06-12T13:22:24.550 回答
0

一个简单的if语句应该可以解决问题。

function changeNoseSize(nose, changeSize) {
    if (changeSize == "bigger") {
        // Bigger Code

    } else if (changeSize == "smaller") {
        // Smaller Code

    } else {
        console.error('no nose size defined')
    }
    // Always run code

}
于 2013-06-12T13:23:43.157 回答