canvas 선 색상 변경 질문입니다.
본문
마우스로 선을 이용하여 편집을 할때 그 선의 color를 바꾸고 싶은데..
구글링을 통하여 알아본결과로는 기존에 소스를이용하여 선을 이미 만들고 그 선에 색을 입히는 것밖의
나와있는 것 같아 혹시 canvas를 마우스로 이용하시는 분들이 계시면 마우스를 이용한 선의 색을 변경할수 있는 오픈소스 사이트 조언좀 부탁드리겠습니다.
현재 setColor, stroke, rect, fillcolor 부분의 소스는 다 먹히질 않는거 같아 뭔가 정보가 더 있을꺼같은데
못찾으니 마음이 아프네요 ㅜㅜ
<!-- 스케치 프로그램 테스트 -->
<script type="text/javascript">
var canvas = document.getElementById('signature-pad');
var testBG = "<?php echo $matches?>";
function resizeCanvas() {
var ratio = Math.max(window.devicePixelRatio || 1, 1);
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext("2d").scale(ratio, ratio);
}
window.onresize = resizeCanvas;
resizeCanvas();
var signaturePad = new SignaturePad(canvas, {
//backgroundColor: 'rgb(140, 140, 140)' // necessary for saving image as JPEG; can be removed is only
});
var backgroundImage = new Image();
context = canvas.getContext("2d");
backgroundImage.src= testBG;
context.drawImage(backgroundImage, 0, 0);
document.getElementById('save-png').addEventListener('click', function () {
var data = signaturePad.toDataURL("image/png");
console.log(data);
var imgData = atob(data.split(',')[1]);
var len = imgData.length;
var buf = new ArrayBuffer(len);
var view = new Uint8Array(buf);
var blob, i;
for(i = 0; i < len; i++){
view[i] = imgData.charCodeAt(i) & 0xff;
}
blob = new Blob([view], {type: 'image/png'});
console.log(blob);
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
a.style = "display:none";
a.href = url;
a.download = "review_comment.png";
document.body.appendChild(a);
a.click();
setTimeout(function(){
document.body.removeChild(a);
URL.revokeObjectURL(url); //메모리 해제
}, 100);
});
document.getElementById('clear').addEventListener('click', function () {
signaturePad.clear();
});
document.getElementById('undo').addEventListener('click', function () {
var data = signaturePad.toData();
if(data){
data.pop();
signaturePad.fromData(data);
}
});
</script>
답변을 작성하시기 전에 로그인 해주세요.
