堆棧內存溢出
  簡體   English   中英

如何向我的畫布應用添加工具

[英]how to add tools to my canvas app

 原文  2014-11-26 20:46:23  9   2    javascript/ html/ css/ canvas

問題描述

我有一個可以正常使用的畫布應用程序，但此刻它有點簡單，我想添加工具，我對Java非常陌生，但現在仍然很多，因此我將能夠理解其中的大部分內容，所有我想添加的內容就像矩形，三角形和正方形之類的形狀。

這是到目前為止的工作演示 。

的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 個解決方案

解決方案1
 1  2014-11-27 08:01:14

看，我用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 ！

解決方案2
 1 已采納  2014-11-27 15:45:05

第一步是擴展engage （mousedown）功能，因為您擁有的方式現在僅適用於單個功能（ putPoint ）。 然后，出於相同的原因，您需要為mousemove設置不同的事件處理程序。

您的應用程序需要具有狀態，例如自由繪圖，矩形，三角形等。 engage函數首先需要讀取當前狀態（您可以將狀態存儲在變量中），因此，如果它是自由繪圖，它將像它一樣工作現在可以使用，但是，例如，如果是矩形，則它將調用用於繪制矩形的其他函數。

您可以采用不同的實現方式：您可以簡單地單擊開始坐標，然后再單擊一次結束坐標。 或者，您可以在mousedown上開始繪制矩形，而在mouseup上完成繪制矩形。 兩種方法仍然使用兩個參數：開始坐標和結束坐標。

對於三角形，這有點不同，因為您顯然不能使用上面的第二種方法（在創建鼠標時按住鼠標），因為三角形需要三個參數（三個點）。

更新

這是使用我上面描述的鼠標按下方法繪制矩形的超簡單示例。

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

下一步是創建當前正在繪制的矩形的實時預覽（當前，直到通過釋放鼠標按鈕完成繪制為止，您將看不到任何東西）。 最好的方法是在主畫布上使用一個臨時畫布，這樣可以避免將內容保持在當前正在繪制的矩形下方的問題，因為您需要清除畫布並按下按鈕時，每次移動鼠標都會刷新預覽。

釋放鼠標按鈕后，您只需將臨時畫布的內容繪制到主畫布上，然后刪除或刪除臨時畫布。

我希望這足以讓您入門。

更新

我繼續寫了一個簡單的示例，在一個臨時畫布上進行實時預覽： 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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何在我的Facebook頁面的標簽上添加我的canvas應用 如何在我的畫布線上添加矩形/箭頭？ 如何使用鼠標將縮放功能添加到畫布 如何在畫布中的 javascript Balls 上添加邊框？ 如何將圖像添加到畫布 如何在畫布上添加形狀？ 如何在我的應用程序內添加過濾器 如何在我的應用程序中添加靜音按鈕？ 如何在Rails 4應用程序中添加時間選擇器字段？ 如何向我的 React 應用程序添加下拉菜單？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM