如何在我的画布应用程序中添加工具

时间：2014-11-26 20:46:24

标签： javascript html css canvas

我有一个完全工作的画布应用程序，但它现在有点简单，我想添加工具，我是非常新的Java，但现在仍然很多，所以我将能够理解大部分，所有我想要添加就像矩形，三角形和正方形等形状。

到目前为止，这是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);

2 个答案:

答案 0 :(得分：1)

看，我用jQuery和Fabric重写了你的代码。

function getRandInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
var canvas = new fabric.Canvas('canvas', {
    isDrawingMode: true
});
var w = canvas.width;
var h = canvas.height;

$('#tri').click(function () {
    var triangle = new fabric.Triangle({
        width: getRandInt(10, w / 2),
        height: getRandInt(10, h / 2),
        fill: $('#color1').val(),
        left: getRandInt(10, w / 2),
        top: getRandInt(10, h / 2)
    });
    canvas.add(triangle);
});
$("#rect").click(function () {
    var rect = new fabric.Rect({
        width: getRandInt(10, w / 2),
        height: getRandInt(10, h / 2),
        fill: $('#color1').val(),
        left: getRandInt(10, w / 2),
        top: getRandInt(10, h / 2)
    });
    canvas.add(rect);
});
$("#circle").click(function () {
    var circle = new fabric.Circle({
        radius: getRandInt(10, w / 4),
        fill: $('#color1').val(),
        left: getRandInt(10, w / 2),
        top: getRandInt(10, h / 2)
    });
    canvas.add(circle);
});
$('#radius').change(function () {
    canvas.freeDrawingBrush.width = parseInt($(this).val(), 10) || 1;
});
$('#color1').change(function () {
    canvas.freeDrawingBrush.color = $(this).val();
});
$('#edit').click(function () {
    canvas.isDrawingMode = !canvas.isDrawingMode;
    $("#draw").prop('disabled', false);
    $(this).prop('disabled', true);
});
$('#draw').click(function () {
    canvas.isDrawingMode = !canvas.isDrawingMode;
    $("#edit").prop('disabled', false);
    $(this).prop('disabled', true);
});
$('#c').click(function () {
    canvas.clear();
});

结果JSFiddle！

答案 1 :(得分：1)

第一步是扩展engage（mousedown）函数，因为现在它的方式只适用于单个功能（putPoint）。然后，出于同样的原因，您需要为mousemove设置不同的事件处理程序。

您的应用需要具有状态，如自由绘图，矩形，三角形等。engage函数首先需要读取当前状态（您可以将状态存储在变量中），所以如果它＆＃39 ; s自由绘图，它会像现在一样工作，但如果它是，例如，矩形，那么它会调用一个用于绘制矩形的不同函数。

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

对于三角形，它有点不同，因为你显然无法使用上面的第二种方法（在创建时按住鼠标），因为三角形需要三个参数（三个点）。

更新

这是一个使用我上面描述的鼠标按下方法的矩形绘图的一个非常简单的例子。

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 = {};
    }
}

这里的下一步是创建您当前正在绘制的矩形的实时预览（目前您不会看到任何内容，直到您通过释放鼠标按钮实际完成绘制它）。最好的方法是在主要的一个上面使用一个临时画布，这样你就可以避免在保留内容的情况下出现问题＆＃34;您当前正在绘制的矩形，因为您需要清除画布并在按钮关闭时刷新每次鼠标移动的预览。

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

我希望这足以让你开始。

更新

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

＆＃13;
＆＃13; 
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);
＆＃13; 
* {
    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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题