javascript - 如何将工具添加到我的 Canvas 应用程序

标签 javascript html css canvas

我有一个可以正常工作的 Canvas 应用程序，但目前它有点简单，我想添加工具，我对 Java 很陌生，但现在仍然很多，所以我将能够理解其中的大部分内容，所有我想要添加的形状就像矩形、三 Angular 形和正方形。

这是一个working demo到目前为止。

HTML

<!doctype html>
<html>
 <head>
<link rel="shortcut icon" type="image/x-icon" href="SiteIcon.ico">
<title>Canvas</title>
<link rel="stylesheet" href="style.css">
<span style="cursor:crosshair"> 
</head>
<body>
<div id="toolbar">
    <div id="rad">
        Radius <span id="radval">10</span>

<div id="decrad" class="radcontrol">-</div>
<div id="incrad" class="radcontrol">+</div> 
<a href="../Be Creative.html"><font color="white">BACK</font></a>
<a href="Canvas.html"><font color="white">CLEAR</font></a>
</div>
<div id="colors">
    .          Colour:
        <input type="color" name="color1" id="color1" />
        <br />
        <br />
</div>
<canvas id="canvas" style="display: block;">sorry, your browser does not support our canvas tag.</canvas>
<script src="jQuery.js"></script>
</body>
</html>

CSS

* {
box-sizing: border-box;
-moz-box-sizing: border-box;
font-family: sans-serif;
margin: 0;
user-select:none;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;


}
#toolbar {
width: 100%;
height: 50px;
padding: 10px;
position: fixed;
top: 0;
background-color: #2f2f2f;
color: white;
}
.radcontrol {
width: 30px;
height: 30px;
background-color: #4f4f4f;
display: inline-block;
text-align: center;
padding: 5px;
}
#rad {
float: left;
}
#colors {
}
.swatch {
width: 30px;
height: 30px;
border-radius: 15px;
box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 2px 2px rgba(0, 0, 0, 0.5);
display: inline-block;
margin-left: 10px;
}
.swatch.active {
border: 2px solid white;
box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.5);
}
#back {
width: 60px;
height: 5px;
padding: 5%;
background-color: white;
}

JavaScript

 function processData(c1, c2) {
            var cv1 = document.getElementById(c1).value;
            var cv2 = document.getElementById(c2).value;
            alert(cv1 + "\n" + cv2);
        }

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var radius = 10;
var dragging = false;

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

context.lineWidth = radius * 2;

var putPoint = function (e) {
if (dragging) {
    var bounds = canvas.getBoundingClientRect();
    var mouseX = e.clientX + bounds.left;
    var mouseY = e.clientY - bounds.top;
    var mouseX = e.clientX + bounds.left - 20;
    context.lineTo(mouseX, mouseY)
    context.strokeStyle = document.getElementById('color1').value;
    context.stroke();
    context.beginPath();
    context.arc(mouseX, mouseY, radius, 0, Math.PI * 2);
    context.fillStyle = document.getElementById('color1').value;
    context.fill();
    context.beginPath();
    context.moveTo(mouseX, mouseY);
}
}

var engage = function (e) {
dragging = true;
putPoint(e);
}

var disengage = function () {
dragging = false;
context.beginPath();
}

canvas.addEventListener('mousedown', engage);
canvas.addEventListener('mousemove', putPoint);
canvas.addEventListener('mouseup', disengage);

var setRadius = function (newRadius) {
if (newRadius < minRad) newRadius = minRad;
else if (newRadius > maxRad) newRadius = maxRad;
radius = newRadius;
context.lineWidth = radius * 2;

radSpan.innerHTML = radius;
}

var minRad = 1,
maxRad = 100,
defaultRad = 20,
interval = 5,
radSpan = document.getElementById('radval'),
decRad = document.getElementById('decrad'),
incRad = document.getElementById('incrad');

decRad.addEventListener('click', function () {
setRadius(radius - interval);
});
incRad.addEventListener('click', function () {
setRadius(radius + interval);
});

setRadius(defaultRad);

最佳答案

第一步是扩展 engage(鼠标按下)功能，因为您现在拥有它的方式仅适用于单一功能 (putPoint)。然后，出于同样的原因，您需要为 mousemove 设置不同的事件处理程序。

您的应用需要有状态，例如自由绘图、矩形、三 Angular 形等。engage 函数首先需要读取当前状态(您可以将状态存储在变量中)，因此如果它是免费绘图，它会像现在一样工作，但如果它是矩形，那么它会调用您用于绘制矩形的不同函数。

您可以采用不同的实现方式:只需单击起始坐标，然后再次单击结束坐标。或者您可以在 mousedown 时开始绘制矩形并在 mouseup 时完成绘制。这两种方法仍然使用 2 个参数:起始坐标和结束坐标。

对于三 Angular 形有点不同，因为您显然不能使用上面的第二种方法(创建它时按住鼠标)，因为三 Angular 形需要三个参数(三个点)。

更新

这是一个使用我上面描述的鼠标按下方法绘制矩形的 super 简单示例。

http://jsfiddle.net/egpr99k9/45/

这个函数可以解决这个问题——它在 mouseup 和 mousedown 事件上都被调用:

var rectData = {};
function drawRect(e, start) {
    var bounds = canvas.getBoundingClientRect();
    var mouseX = e.clientX + bounds.left - 20;
    var mouseY = e.clientY - bounds.top;
    if (start) {
        rectData.start = {
            x: mouseX,
            y: mouseY
        }
    }
    else {
        if (rectData.start) {
            context.beginPath();     
            context.rect(
                rectData.start.x, 
                rectData.start.y,
                mouseX - rectData.start.x, 
                mouseY - rectData.start.y
            );
            context.fillStyle = document.getElementById('color1').value;
            context.fill();
        }
        rectData.start = {};
    }
}

这里的下一步是创建您当前正在绘制的矩形的实时预览(目前您将无法看到任何东西，直到您通过释放鼠标按钮实际完成绘制为止)。最好的方法是在主 Canvas 上使用临时 Canvas ，这样就可以避免将内容保持在当前绘制的矩形“下方”的问题，因为您需要清除 Canvas 和按下按钮时每次移动鼠标时刷新预览。

一旦释放鼠标按钮，您只需将临时 Canvas 的内容绘制到主 Canvas 上，然后删除或移除临时 Canvas 。

我希望这足以让您入门。

更新

我继续为您写了一个在临时 Canvas 上进行实时预览的简单示例:http://jsfiddle.net/egpr99k9/46/ 

function processData(c1, c2) {
    var cv1 = document.getElementById(c1).value;
    var cv2 = document.getElementById(c2).value;
    alert(cv1 + "\n" + cv2);
}

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var radius = 10;
var dragging = false;

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

context.lineWidth = radius * 2;

var putPoint = function (e) {
    if (dragging) {
        var bounds = canvas.getBoundingClientRect();
        var mouseX = e.clientX + bounds.left;
        var mouseY = e.clientY - bounds.top;
        var mouseX = e.clientX + bounds.left - 20;
        context.lineTo(mouseX, mouseY)
        context.strokeStyle = document.getElementById('color1').value;
        context.stroke();
        context.beginPath();
        context.arc(mouseX, mouseY, radius, 0, Math.PI * 2);
        context.fillStyle = document.getElementById('color1').value;
        context.fill();
        context.beginPath();
        context.moveTo(mouseX, mouseY);
    }
}

var tmpCanvas = document.getElementById('tmp');
tmpCanvas.width = canvas.width;
tmpCanvas.height = canvas.height;
tmpCanvas.id = 'tmp';
document.body.appendChild(tmpCanvas);
var tmpCtx = tmpCanvas.getContext('2d');

var rectData = {};

function drawRect(e, start, move) {
    var bounds = canvas.getBoundingClientRect();
    var mouseX = e.clientX + bounds.left - 20;
    var mouseY = e.clientY - bounds.top;
    if (start) {        
        rectData.start = {
            x: mouseX,
            y: mouseY
        }
    } else if (move) {
        tmpCanvas.width = tmpCanvas.width;
        tmpCtx.beginPath();
        tmpCtx.rect(
            rectData.start.x,
            rectData.start.y,
            mouseX - rectData.start.x,
            mouseY - rectData.start.y);
        tmpCtx.fillStyle = document.getElementById('color1').value;
        tmpCtx.fill();
    } else {
        if (rectData.start) {
            tmpCanvas.width = tmpCanvas.width;
            context.beginPath();
            context.rect(
                rectData.start.x,
                rectData.start.y,
                mouseX - rectData.start.x,
                mouseY - rectData.start.y);
            context.fillStyle = document.getElementById('color1').value;
            context.fill();
        }
        rectData.start = {};
    }
}

var engage = function (e) {
    dragging = true;
    //putPoint(e);
    drawRect(e, true);
}

var disengage = function (e) {
    dragging = false;
    context.beginPath();
    drawRect(e, false);
}

canvas.addEventListener('mousedown', engage);
canvas.addEventListener('mousemove', function(e){
    drawRect(e, false, true);
});
canvas.addEventListener('mouseup', disengage);

var setRadius = function (newRadius) {
    if (newRadius < minRad) newRadius = minRad;
    else if (newRadius > maxRad) newRadius = maxRad;
    radius = newRadius;
    context.lineWidth = radius * 2;
    
    radSpan.innerHTML = radius;
}

var minRad = 1,
    maxRad = 100,
    defaultRad = 20,
    interval = 5,
    radSpan = document.getElementById('radval'),
    decRad = document.getElementById('decrad'),
    incRad = document.getElementById('incrad');

decRad.addEventListener('click', function () {
    setRadius(radius - interval);
});
incRad.addEventListener('click', function () {
    setRadius(radius + interval);
});

setRadius(defaultRad);
* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    font-family: sans-serif;
    margin: 0;
    user-select:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
}
#toolbar {
    width: 100%;
    height: 50px;
    padding: 10px;
    position: fixed;
    top: 0;
    background-color: #2f2f2f;
    color: white;
}
.radcontrol {
    width: 30px;
    height: 30px;
    background-color: #4f4f4f;
    display: inline-block;
    text-align: center;
    padding: 5px;
}
#rad {
    float: left;
}
#colors {
}
.swatch {
    width: 30px;
    height: 30px;
    border-radius: 15px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 2px 2px rgba(0, 0, 0, 0.5);
    display: inline-block;
    margin-left: 10px;
}
.swatch.active {
    border: 2px solid white;
    box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.5);
}
#back {
    width: 60px;
    height: 5px;
    padding: 5%;
    background-color: white;
}
canvas {
  cursor: crosshair;
  display: block;
}
#tmp {
  pointer-events: none;
  display: block; position: absolute;left: 10px;top: 50px;
  opacity: 0.5;
}
<div id="toolbar">
    <div id="rad">Radius <span id="radval">10</span>

        <div id="decrad" class="radcontrol">-</div>
        <div id="incrad" class="radcontrol">+</div>	<a href="../Be Creative.html"><font color="white">BACK</font></a>
	<a href="Canvas.html"><font color="white">CLEAR</font></a>

    </div>
    <div id="colors">. Colour:
        <input type="color" name="color1" id="color1" />
        <br />
        <br />
    </div>
    <canvas id="canvas">sorry, your browser does not support our canvas tag.</canvas>
    <canvas id="tmp">sorry, your browser does not support our canvas tag.</canvas>
</div>

关于javascript - 如何将工具添加到我的 Canvas 应用程序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27158580/

上一篇：javascript - WordPress 主题预览器？从哪儿开始？

下一篇：php - 用 PHP 上的 DIV 替换数据库中的 <br/>

相关文章：

html - 嵌入 flv 文件作为横幅

html - 使用 HTML Div 制作导航栏

html - Css bootstrap 响应问题

css - 如何使径向渐变在 Safari 中起作用？

javascript - 使用 javascript jquery 创建 'infinite' 幻灯片效果

JavaScript。 Math.sqrt 将 NaN 赋予正数？

javascript - 如何在 WebStorm 中运行 JavaScript

javascript - 如何在html表中显示firebase运行时数据库数据

javascript - 在 JavaScript 中使用 Array.at(index) 而不是 Array[index]

css - 如果 <div> 为空，背景图像不会出现？

©2024 IT工具网  联系我们