我想保存画布的每个笔划,但是有些点没有保存,有些图纸上的点丢失了,就像我画了朵花一样。
形成的字符串另存为: 点数 坐标点(x,y)。 对于每一行,所有行均以十六进制存储,因此它们具有相同的长度,在此示例中为最大数字255,即FF。
例如:no_points xy xy xy no_points xy xy xy
03 f4bf f4be f5bd 03 .....
“翻译” 3 244 191 244 190 245 189
3是点和其他坐标
var flag = false,
prevX = 0,
currX = 0,
prevY = 0,
currY = 0,
dot_flag = false;
var color = "black",
line_width = 1;
var current_signature = 0,
total_lines = [0,0],
str_lines = [[],[]];
function init() {
canvases = document.getElementsByClassName('canvassign');
ctxs = [];
w = canvases[0].width;
h = canvases[0].height;
for(var i = 0; i < 3; i++) { //canvases.length just for test
ctxs[i] = canvases[i].getContext('2d');
loadSignature(i);
canvases[i].addEventListener("mousemove", function (e) {
findxy('move', e)
}, false);
canvases[i].addEventListener("mousedown", function (e) {
findxy('down', e)
}, false);
canvases[i].addEventListener("mouseup", function (e) {
findxy('up', e)
}, false);
canvases[i].addEventListener("mouseout", function (e) {
findxy('out', e)
}, false);
}
}
function findxy(res, e) {
if (res == 'down') {
prevX = currX;
prevY = currY;
currX = e.clientX - canvases[current_signature].offsetLeft;
currY = e.clientY - canvases[current_signature].offsetTop;
flag = true;
dot_flag = true;
if (dot_flag) {
ctxs[current_signature].beginPath();
ctxs[current_signature].fillStyle = color;
ctxs[current_signature].fillRect(currX, currY, 2, 2);
ctxs[current_signature].closePath();
saveDot(current_signature,currX,currY);
dot_flag = false;
}
}
if (res == 'up' || res == "out") {
flag = false;
saveLine(current_signature);
}
if (res == 'move') {
if (flag) {
prevX = currX;
prevY = currY;
currX = e.clientX - canvases[current_signature].offsetLeft;
currY = e.clientY - canvases[current_signature].offsetTop;
draw();
}
}
}
function draw() {
ctxs[current_signature].beginPath();
ctxs[current_signature].moveTo(prevX, prevY);
ctxs[current_signature].lineTo(currX, currY);
ctxs[current_signature].strokeStyle = color;
ctxs[current_signature].lineWidth = line_width;
ctxs[current_signature].stroke();
ctxs[current_signature].closePath();
str_lines[current_signature].push( [currX, currY] );
}
function getSignature(n_signature) {
str_points = document.getElementById("signature"+(n_signature+1)).value
if(str_points==""){
return;
}
cutToLines(n_signature, str_points)
}
function cutToLines(n_signature, str_points){ //coordenadas coordinates
chars = 2;
full_length = str_points.length;
str_index = 0;
while (str_index < full_length) {
total_points_hex = str_points.slice(str_index, str_index+chars);
total_points = toDec(total_points_hex)
real_total_points = total_points*4;
begin = str_index+chars;
end = real_total_points+begin;
line = str_points.slice(begin, end);
drawLines(line, total_points, n_signature);
//console.log("-----");
str_index = end;
}
}
function splitEvery (s, interval) {
var result = [];
if (typeof s !== 'undefined'){
for (var i=0; i<s.length; i+=interval)
result.push(s.substring (i, i+interval));
}
return result;
}
function drawLines(line, total_points, n_signature) {
// console.log("drawing Lines(line: "+line+" "+"total_points"+total_points+"n_signature "+n_signature);;
n = splitEvery(line, 4)
xy = splitEvery(n[0], 2);
// console.log("x2:"+xy[0]);
// console.log("y2:"+xy[1]);
x2 = toDec(xy[0]);
y2 = toDec(xy[1]);
if(n.length!=total_points){ //this is for testing, delete this
total_points = n.length;
console.error("total_points no match with the length");
}
if (total_points==1) {
// console.log(xy[0]+xy[1]); this for debug
ctxs[n_signature].beginPath();
ctxs[n_signature].fillStyle = color;
ctxs[n_signature].fillRect(x2, y2, 2, 2);
ctxs[n_signature].closePath();
// console.log("dot");
}
for (var i = 1; i < total_points - 1; i++) { //check -1
x1 = x2;
y1 = y2;
xy = splitEvery(n[i], 2);
// console.log(xy[0]+xy[1]);
x2 = toDec(xy[0]);
y2 = toDec(xy[1]);
ctxs[n_signature].beginPath();
ctxs[n_signature].moveTo(x1, y1);
ctxs[n_signature].lineTo(x2, y2);
ctxs[n_signature].strokeStyle = color;
ctxs[n_signature].lineWidth = line_width;
ctxs[n_signature].stroke();
ctxs[n_signature].closePath();
}
}
function toHex(s){
var a = s.toString(16);
if ((a.length % 2) > 0)
a = "0" + a;
return a;
}
function toDec(s) {
var a = parseInt(s, 16).toString(10);
a = parseInt(a, 10);
return a;
}
function changeSignature(selected_signature, not_selected) {
current_signature = selected_signature;
document.getElementById("canvas_sign"+(not_selected+1)).style.display = "none";
document.getElementById("canvas_sign"+(selected_signature+1)).style.display = "inline";
}
function clearSignature() {
ctxs[current_signature].clearRect(0, 0, w, h);
ctxs[2].clearRect(0, 0, w, h); //just for test
document.getElementById("signature"+(current_signature+1)).value = ''
str_lines[current_signature] = [];
total_lines[current_signature] = 0;
console.clear();
}
function save(){
var form = document.getElementById('test_form');
form.submit();
}
function saveDot(n_signature, x, y) {
//console.log(n_signature) problems wear with n signature, uncomment this
// console.log("saving dot")
// console.log(x+" "+y)
total_points = 0;
points = '';
xy = toHex(x) + toHex(y);
if(xy.length!=4 && xy.length>0){
// console.error(xy);
}else{
// console.log(xy)
total_points++;
points = points + xy;
savePoint(n_signature, total_points, points);
}
}
function savePoint(n_signature, total_points, points){
console.log("drawlines"+total_points);
drawLines(points, total_points, 2); //just for test
if(total_points>0 && points!==''){
txtsignature = document.getElementById("signature"+(n_signature+1))
txtsignature.value = txtsignature.value + toHex(total_points)+points; //str_lines[n_signature];
str_lines[n_signature] = [];
}
}
function saveLine(n_signature) {
if(n_signature!=2){ //for test
total_lines[n_signature] = 0;
total_lines[n_signature] = str_lines[n_signature].length;
var points = '';
total_points = 0;
for (var i = 0; i < total_lines[n_signature]; i++) {
point = str_lines[n_signature][i];
var [x, y] = point;
xy = toHex(x) + toHex(y);
if(xy.length!=4){
// console.error(xy);
continue;
}
// console.log(xy)
total_points++;
points = points + xy;
//console.log(points);
}
savePoint(n_signature, total_points, points);
}
}
function loadSignature(n_signature){
if(document.getElementById("signature"+(n_signature+1)).value!=='')
getSignature(n_signature);
}
init();
有时它有时不起作用 我在想,有时候如果我只画一条线,我就不会完成它,因为它切掉了最后一部分,这就是我认为在更复杂的工程图中会发生的情况。
示例: drawing example
答案 0 :(得分:0)
当一个坐标大于255时,您的方法显然存在一个问题,因为这些数字转换为十六进制时需要两位以上。