javascript - HTML JavaScript キャンバスの色の変更

Question

私が取り組んでいる小さなプロジェクトがあり、HTML だけでなく内部のスクリプトもまったく初めてです。論理的に (私にとって) 理にかなっているコードがいくつかありますが、何らかの理由で機能していません。キャンバスを使用して描画ツールを作成するために見つけたコードを使用していますが、ドロップダウンメニューで色を変更するのに問題があります。私はこれまでのところこのコードを持っています。

<!--drop down box for selected drawing tools-->
<p><label>Select Tool: <select id = "selectedTool">
    <option value="rectangle">Rectangle</option>
    <option value="pencil">Pencil</option>
    <option value="line">Line</option>
</select></label></p>

<!--drop down box for selected colors.-->
<p><label>Color: <select id="selectedColor">
    <option value="red">Red</option>
    <option value="blue">Blue</option>
    <option value="green">Green</option>
</select></label></p>

私の描画関数メソッドには、次のものがあります。

var color_select = document.getElementById('selectedColor');
this.mousemove = function (ev) {
  if (tool.started){
    context.lineTo(ev._x, ev._y);
    var color_select = document.getElementById('selectedColor');
    if(color_select == red)
        context.strokeStyle = 'red';
    else if(color_select == blue)
        context.strokeStyle = 'blue';
    else if(color_select == green)
        context.strokeStyle = 'green';
    context.stroke();
  }
};

これにより、描画ツールが完全に停止します。以下に、上記のものとは無関係の場合に備えて、完全なコードを投稿します。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Simmons Stitching v1.0.0</title>
<style type="text/css"><!--
#container { position: relative; }
#imageView { border: 1px solid #000; }
--></style>
</head>

<body>
<!--drop down box for selected drawing tools-->
<p><label>Stitching Tool: <select id="selectedTool">
<option value="rectangle">Rectangle</option>
<option value="pencil">Pencil</option>
<option value="line">Line</option>
</select></label></p>

<!--drop down box for selected colors.-->
<p><label>Color: <select id="selectedColor">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select></label></p>

<!-- ... -->
</body>
<body>
<div id="container">
<canvas id="imageView" width="400" height="300">
<p>Wrong browser for this application sucka!  Get a browser worth having!</p>
<p>Try one of these: <a href="http://www.opera.com">Opera</a>, <a 
      href="http://www.mozilla.com">Firefox</a>, <a 
      href="http://www.apple.com/safari">Safari</a>, and <a 
      href="http://www.konqueror.org">Konqueror</a>.</p>
</canvas>
</div>

<script type="text/javascript" 
src="example1.js">
</script>



<script>

// Keep everything in anonymous function, called on window load.
if(window.addEventListener) {
window.addEventListener('load', function () {
var canvas, context, canvaso, contexto;

// The active tool instance.
var tool;
var tool_default = 'line';

function init () {
// Find the canvas element.
canvaso = document.getElementById('imageView');
if (!canvaso) {
  alert('Error: I cannot find the canvas element!');
  return;
}

if (!canvaso.getContext) {
  alert('Error: no canvas.getContext!');
  return;
}

// Get the 2D canvas context.
contexto = canvaso.getContext('2d');
if (!contexto) {
  alert('Error: failed to getContext!');
  return;
}

// Add the temporary canvas.
var container = canvaso.parentNode;
canvas = document.createElement('canvas');
if (!canvas) {
  alert('Error: I cannot create a new canvas element!');
  return;
}

canvas.id     = 'imageTemp';
canvas.width  = canvaso.width;
canvas.height = canvaso.height;
container.appendChild(canvas);

context = canvas.getContext('2d');

// Get the tool select input.
var tool_select = document.getElementById('selectedTool');
if (!tool_select) {
  alert('Error: failed to get the selectedTool element!');
  return;
}
tool_select.addEventListener('change', ev_tool_change, false);

// Activate the default tool.
if (tools[tool_default]) {
  tool = new tools[tool_default]();
  tool_select.value = tool_default;
}

// Attach the mousedown, mousemove and mouseup event listeners.
canvas.addEventListener('mousedown', ev_canvas, false);
canvas.addEventListener('mousemove', ev_canvas, false);
canvas.addEventListener('mouseup',   ev_canvas, 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 == 0) { // 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);
}
}

// The event handler for any changes made to the tool selector.
function ev_tool_change (ev) {
if (tools[this.value]) {
  tool = new tools[this.value]();
}
}

// This function draws the #imageTemp canvas on top of #imageView, after which 
// #imageTemp is cleared. This function is called each time when the user 
// completes a drawing operation.
function img_update () {
    contexto.drawImage(canvas, 0, 0);
    context.clearRect(0, 0, canvas.width, canvas.height);
}

// This object holds the implementation of each drawing tool.
var tools = {};

// The drawing pencil.
tools.pencil = function () {
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).
var color_select = document.getElementById('selectedColor');
this.mousemove = function (ev) {
  if (tool.started){
    context.lineTo(ev._x, ev._y);
    //******************************************************************************
    var color_select = document.getElementById('selectedColor');
    if(color_select == red)
        context.strokeStyle = 'red';
    else if(color_select == blue)
        context.strokeStyle = 'blue';
    else if(color_select == green)
        context.strokeStyle = 'green';
    context.stroke();
  }
};

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

// The rectangle tool.
tools.rectangle = function () {
var tool = this;
this.started = false;

this.mousedown = function (ev) {
  tool.started = true;
  tool.x0 = ev._x;
  tool.y0 = ev._y;
};

this.mousemove = function (ev) {
  if (!tool.started) {
    return;
  }

  var x = Math.min(ev._x,  tool.x0),
      y = Math.min(ev._y,  tool.y0),
      w = Math.abs(ev._x - tool.x0),
      h = Math.abs(ev._y - tool.y0);

  context.clearRect(0, 0, canvas.width, canvas.height);

  if (!w || !h) {
    return;
  }

  context.strokeRect(x, y, w, h);
};

this.mouseup = function (ev) {
  if (tool.started) {
    tool.mousemove(ev);
    tool.started = false;
    img_update();
  }
};
};

// The line tool.
tools.line = function () {
var tool = this;
this.started = false;

this.mousedown = function (ev) {
  tool.started = true;
  tool.x0 = ev._x;
  tool.y0 = ev._y;
};

this.mousemove = function (ev) {
  if (!tool.started) {
    return;
  }

  context.clearRect(0, 0, canvas.width, canvas.height);

  context.beginPath();
  context.moveTo(tool.x0, tool.y0);
  context.lineTo(ev._x,   ev._y);
  context.stroke();
  context.closePath();
};

this.mouseup = function (ev) {
  if (tool.started) {
    tool.mousemove(ev);
    tool.started = false;
    img_update();
  }
};
};

init();

}, false); }

// vim:set spell spl=en fo=wan1croql tw=80 ts=2 sw=2 sts=2 sta et ai cin fenc=utf-8    ff=unix:


</script>
<style type="text/css">
#container { position: relative; }
#imageView { border: 1px solid #000; }
#imageTemp { position: absolute; top: 1px; left: 1px; }
</style>

</body>
</html>

score 1 · Accepted Answer

コードでを使用して新しいパスを作成する必要がありbeginPath()ます。そうしないと、これまでに描画したパス全体が現在の色で再描画され、時間の経過とともにパスにすべての行が蓄積され、速度が低下し始めます。

さらに、現在のポイントを古いポイントとして保存する必要があるため、線を引くものがあります。

まず、マウスダウンイベントで、これをグローバルスコープの 2 つの新しい変数と一緒に追加します。また、マウスダウンでストロークスタイルを設定して、ここで色を設定します。

var color_select = document.getElementById('selectedColor'),
    oldX, oldY;  /// use these here

this.mousedown = function(ev) {

    /// get the point here as x and y

    /// set them as oldX/Y to have a start point for mouse move
    oldX = x;
    oldY = Y;

    /// set stroke style
    context.strokeStyle = document.getElementById('selectedColor').value;
}

そして、マウス移動イベントのコールバックで:

this.mousemove = function (ev) {

  if (tool.started){

    var x = ev._x,
        y = ev._y;

    /// here, add beginPath
    context.beginPath();

    /// now create a segment for the line like this
    context.moveTo(oldX, oldY);
    context.lineTo(x, y);

    /// stroke it with current color
    context.stroke();

    /// update "old" position with current so they are
    /// a start point for next move.
    oldX = x;
    oldY = Y;
};

javascript - HTML JavaScript キャンバスの色の変更

2 に答える 2

Related

Reference