캔버스 응용 프로그램에 도구를 추가하는 방법

나는 완전히 작동하는 캔버스 응용 프로그램을 가지고 있지만 그 순간에 약간의 평범함과 도구를 추가하고 싶습니다. 저는 아주 새로운 자바이지만 아직 많이 사용할 수있게 될 것입니다. 그것의 대부분을 이해하기 위해서, 내가 추가하고 싶은 것은 사각형과 삼각형과 사각형과 같은 모양입니다.캔버스 응용 프로그램에 도구를 추가하는 방법

여기까지 지금까지 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; 
}

자바 스크립트

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);

출처

2014-11-26 Daniel Adams

참고 : 자바는 아니다 JavaScript. – APerson

괜찮습니다. @Aperson –

무엇이 당신의 질문입니까? 누군가가 여러분에게 직사각형과 삼각형을 만드는 코드를 작성하기를 원하십니까? – Shomz

첫 번째 단계는 engage (mousedown) 기능을 확장하는 것입니다. 그 방법은 단일 기능 (putPoint)에서만 작동하기 때문입니다. 그런 다음 동일한 이유로 mousemove에 대해 다른 이벤트 처리기를 설정해야합니다.

자유 그림, 직사각형, 삼각형 등의 상태가 필요합니다. engage 함수는 먼저 현재 상태 (변수에 상태를 저장할 수 있음)를 읽어야하므로 자유 그림이면 이제는 작동하지만, 예를 들어 직사각형이라면 직사각형을 그리는 데 사용하는 다른 함수를 호출합니다.

구현에 대해 다른 방법을 사용할 수 있습니다. 시작 좌표를 클릭하고 끝 좌표에서 다른 시간을 클릭하면됩니다. 또는 mousedown에서 사각형 그리기를 시작하고 mouseup에서 사각형을 그릴 수 있습니다. 두 가지 접근법은 여전히 두 개의 매개 변수, 즉 시작 좌표와 끝 좌표를 사용합니다.

삼각형이 세 개의 매개 변수 (세 점)를 필요로하기 때문에 위와 같은 두 번째 방법을 사용할 수 없다는 점에서 조금 다릅니다.

여기

업데이트

I는 상술 한 마우스 아래 방법을 이용하여 구형 드로잉 슈퍼 간단한 예이다.

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/45/

이

트릭을 수행하는 기능입니다 그것은 mouseup에와 mousedown 이벤트에 모두 전화입니다 현재 드로잉 (현재 마우스 버튼을 놓아 그리기를 마칠 때까지는 아무 것도 보지 못합니다). 가장 좋은 방법은 기본 캔버스 위에 임시 캔버스를 사용하는 것입니다. 그러면 캔버스를 지울 필요가 있기 때문에 현재 그리는 사각형의 "아래"에 컨텐츠를 유지하는 문제를 피할 수 있습니다. 버튼이 눌러져있는 동안 각 마우스의 미리보기를 새로 고침하십시오.

일단 마우스 버튼을 놓으면 임시 캔버스의 내용을 주 캔버스에 그려서 임시 캔버스를 삭제하거나 제거하면됩니다.

본인이 시작할 수 있기를 바랍니다.

UPDATE는

내가 나서서 임시 캔버스에 실시간 미리보기와 함께 당신에게 간단한 예를 썼다 : 미래를위한 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> \t <a href="../Be Creative.html"><font color="white">BACK</font></a> 
 
\t <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>

출처

2014-11-27 15:45:05 Shomz

감사합니다. 이것은 나에게 훌륭한 출발점을 주었고 잘하면 내가 그림 그리기 응용 프로그램에 다양한 도구를 추가 할 수있을 것입니다 –

당신은 오신 것을 환영합니다. 임시 캔버스로 최신 업데이트를 확인하고 Photoshop에 가까이 가십시오. :) Btw. 무작위로 모양을 그리는 대답을 받아 들였다는 것을 믿을 수 없습니다. – Shomz

제발 도와 주시면 선 도구를 만드는 방법을 보여 주실 수 있습니다. @Shomz –

봐, 내가 jQuery를 패브릭과 코드를 다시 썼다.

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!

출처

2014-11-27 08:01:14 Tegos

심각하게? 임의의 모양을 추가하는 것이 대답으로 선택됩니까? – Shomz

캔버스 응용 프로그램에 도구를 추가하는 방법

답변

관련 문제