0

私は現在、単純な描画アプリケーションを作成しており、特定のサウンドに色を付けて、ユーザーが描画中にサウンドが再生される色でキャンバスに描画するたびに、コーディングを手伝ってくれる人がいるかどうか疑問に思っていました。

ありがとう！

これは、描画アプリ用にこれまでに持っている Javascript です。

var started = false;
var canvas, context;
var stampId = '';
var lastColor = 'red';
var lastStampId = '';

function init() {
    canvas = $('#imageView').get(0);
    context = canvas.getContext('2d');

    // Auto-adjust canvas size to fit window.
    canvas.width  = window.innerWidth - 80 ;
    canvas.height = window.innerHeight - 80 ;

    //$('#container').get(0).addEventListener('mousemove', onMouseMove, false);
    canvas.addEventListener('click', onClick, false);
    canvas.addEventListener('mousedown', ev_canvas, false);
    canvas.addEventListener('mousemove', ev_canvas, false);
    canvas.addEventListener('mouseup',   ev_canvas, false);

    // Add events for toolbar buttons.
    $('#red').get(0).addEventListener('click', function(e) { onColorClick(e.target.id); }, false);
    $('#orange').get(0).addEventListener('click', function(e) { onColorClick(e.target.id); }, false);
    $('#yellow').get(0).addEventListener('click', function(e) { onColorClick(e.target.id); }, false);
    $('#green').get(0).addEventListener('click', function(e) { onColorClick(e.target.id); }, false);
    $('#blue').get(0).addEventListener('click', function(e) { onColorClick(e.target.id); }, false);
    $('#purple').get(0).addEventListener('click', function(e) { onColorClick(e.target.id); }, false);


    // Attach the mousedown, mousemove and mouseup event listeners.

  }

  // The pencil tool instance.
  tool = new tool_pencil();
  // This painting tool works like a drawing pencil which tracks the mouse 
  // movements.
  function tool_pencil () {
    var tool = this;
    this.started = false;

    // This is called when you start holding down the mouse button.
    // This starts the pencil drawing.
    this.mousedown = function (ev) {
        context.beginPath();
        context.moveTo(ev._x, ev._y);
        tool.started = true;
    };

    // This function is called every time you move the mouse. Obviously, it only 
    // draws if the tool.started state is set to true (when you are holding down 
    // the mouse button).
    this.mousemove = function (ev) {
      if (tool.started) {
        context.lineTo(ev._x, ev._y);
        context.stroke();
    context.lineJoin = "round";
    context.lineWidth = 5;
      }
    };

    // This is called when you release the mouse button.
    this.mouseup = function (ev) {
      if (tool.started) {
        tool.mousemove(ev);
        tool.started = false;
      }
    };
  }

  // The general-purpose event handler. This function just determines the mouse 
  // position relative to the canvas element.
  function ev_canvas (ev) {
    if (ev.layerX || ev.layerX ==0) { // Firefox
      ev._x = ev.layerX;
      ev._y = ev.layerY;
    } else if (ev.offsetX || ev.offsetX == 10 ) { // Opera
      ev._x = ev.offsetX;
      ev._y = ev.offsetY;
    }

    // Call the event handler of the tool.
    var func = tool[ev.type];
    if (func) {
      func(ev);
    }
  }



function onClick(e) {
    if (stampId.length > 0) {
        context.drawImage($(stampId).get(0), e.pageX - 90, e.pageY - 60, 80, 80);
    }
}

function onColorClick(color) {
    // Start a new path to begin drawing in a new color.
    context.closePath();
    context.beginPath();

    // Select the new color.
    context.strokeStyle = color;

    // Highlight selected color.
    var borderColor = 'white';
    if (color == 'white' || color == 'yellow') {
        borderColor = 'black';
    }

    $('#' + lastColor).css("border", "0px dashed white");
    $('#' + color).css("border", "1px dashed " + borderColor);

    // Store color so we can un-highlight it next time around.
    lastColor = color;
}

function onFill() {
    // Start a new path to begin drawing in a new color.
    context.closePath();
    context.beginPath();

    context.fillStyle = context.strokeStyle;
    context.fillRect(0, 0, canvas.width, canvas.height);
}

function onStamp(id) {
    // Update the stamp image.
    stampId = '#' + id;

    $(lastStampId).css("border", "0px dashed white");
    $(stampId).css("border", "1px dashed black");

    // Store stamp so we can un-highlight it next time around.
    lastStampId = stampId;  
}
4

1 に答える 1

1 
<audio id="snd_red" src="red.mp3"></audio>
<audio id="snd_blue" src="blue.mp3"></audio>
...

snd = null;
playing = false;

canvas.addEventListener('mousedown', function(){
    if (snd && !playing) {
        playing = true;
        snd.play();
    }
}, false);

canvas.addEventListener('mouseup', function(){
    if (snd && playing) {
        snd.stop();
        snd = null;
        playing = false;
    }
}, false);

function onColorClick(e, color){
    snd = document.getElementById("snd_" + color);
}

すべての色に対して1行でこれを行うことができます：

$('#red,#blue,#green,...').bind('click', function(e) { onColorClick(e.target.id, $(this).attr("id")); }, false);

しかし、次の場合もあります。

$('.color').bind('click', function(e) { onColorClick(e.target.id, $(this).attr("id")); }, false);

それらのそれぞれに class="color" を追加できる場合（ただし、そのままにしておきます）

解決：

基本的に私の答えはうまくいきましたが、あなたのコードにはいくつかの問題がありました:

http://neswork.com/javascript/sound-draw/1st/ (お好みでドロー時のみ音を鳴らす)

http://neswork.com/javascript/sound-draw/2nd/ (好きなように: 常にサウンド)

于 2012-04-11T19:37:06.887 に答える