2017-10-09 19 views
0

我試圖將標識添加到綠色。 所有默認顏色都可以正常工作,但我無法使用相機爲顏色添加新顏色。無法註冊新的顏色javascript tracking.js

更多信息:ColorTracker

window.onload = function() { 
    var video = document.getElementById('video'); 
    var canvas = document.getElementById('canvas'); 
    var context = canvas.getContext('2d'); 

    var tracker = new tracking.ColorTracker(); 

    tracking.ColorTracker.registerColor('green', function (r, g, b) { 
     if (r < 50 && g > 200 && b < 50) { 
      return true; 
     } 
     return false; 
    }); 

    tracking.track('#video', tracker, { camera: true }); 

    tracker.on('track', function(event) { 
    context.clearRect(0, 0, canvas.width, canvas.height); 

    event.data.forEach(function(rect) { 
     if (rect.color === 'custom') { 
     rect.color = tracker.customColor; 
     } 

     context.strokeStyle = rect.color; 
     context.strokeRect(rect.x, rect.y, rect.width, rect.height); 
     context.font = '11px Helvetica'; 
     context.fillStyle = "#fff"; 
     context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11); 
     context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22); 
    }); 
    }); 

initGUIControllers(tracker); 
}; 

回答

0

你正在做的是正確的,只是顏色跟蹤是很挑剔的。它將選擇與RGB顏色中最接近G的任何顏色。因爲這個,它會選擇一些黑色和其他顏色。我會建議您獲得想要跟蹤的確切綠色的RGB顏色,然後離開。我包括我在我的項目中工作的少數人(這並不意味着這些將爲你的綠色工作)

tracking.ColorTracker.registerColor('darkgreen', function (r, g, b) { 
    if (r < 120 && r > 80 && g < 150 && b < 70) { 
    return true; 
    } 
    return false; 
}); 

tracking.ColorTracker.registerColor('lightgreen', function (r, g, b) { 
    if (r < 30 && g < 100 && b < 30) { 
    return true; 
    } 
    return false; 
}); 

tracking.ColorTracker.registerColor('green', function (r, g, b) { 
    if (r < 30 && g < 50 && b < 30) { 
    return true; 
    } 
    return false; 
});