equal
deleted
inserted
replaced
291 /* add resizer */ |
291 /* add resizer */ |
292 |
292 |
293 paper.mousedown(function (e) { |
293 paper.mousedown(function (e) { |
294 |
294 |
295 if (drawingMode === FREE_MODE || pathIsClosed) { return; } |
295 if (drawingMode === FREE_MODE || pathIsClosed) { return; } |
296 startPosition.x = e.offsetX; |
296 var offset = computeOffset(e) |
297 startPosition.y = e.offsetY; |
297 startPosition.x = offset.x; |
|
298 startPosition.y = offset.y; |
298 canDraw = true; |
299 canDraw = true; |
299 }); |
300 }); |
300 |
301 |
301 paper.mousemove(function (e) { |
302 paper.mousemove(function (e) { |
302 if (drawingMode === FREE_MODE) { return; } |
303 if (drawingMode === FREE_MODE) { return; } |
303 if (!canDraw) { return; } |
304 if (!canDraw) { return; } |
304 var x, y; |
305 var x, y; |
305 currentPosition.x = e.offsetX; |
306 var offset = computeOffset(e) |
306 currentPosition.y = e.offsetY; |
307 currentPosition.x = offset.x; |
|
308 currentPosition.y = offset.y; |
307 |
309 |
308 if (rectZone) { |
310 if (rectZone) { |
309 rectZone.remove(); |
311 rectZone.remove(); |
310 } |
312 } |
311 |
313 |
373 }); |
375 }); |
374 |
376 |
375 var computeOffset = function (e) { |
377 var computeOffset = function (e) { |
376 var target = e.target || e.srcElement; |
378 var target = e.target || e.srcElement; |
377 var rect = target.getBoundingClientRect(); |
379 var rect = target.getBoundingClientRect(); |
378 var offsetX = e.clientX - rect.left; |
380 var offsetX = (e.clientX - rect.left) / Math.min(zoomFactor.x, zoomFactor.y); |
379 var offsetY = e.clientY - rect.top; |
381 var offsetY = (e.clientY - rect.top) / Math.min(zoomFactor.x, zoomFactor.y); |
380 return {x: offsetX, y: offsetX}; |
382 return {x: offsetX, y: offsetY}; |
381 } |
383 } |
382 |
384 |
383 var clickHandler = function (offsetX, offsetY) { |
385 var clickHandler = function (offsetX, offsetY) { |
384 |
386 |
385 if (preventClick) { return; } |
387 if (preventClick) { return; } |
393 preventClick = false; |
395 preventClick = false; |
394 } |
396 } |
395 |
397 |
396 paper.click(function (e) { |
398 paper.click(function (e) { |
397 if (clickTimeout) { return; } |
399 if (clickTimeout) { return; } |
398 var offsetX = e.offsetX; |
400 if (!jQuery(e.target).is(mainImage)) { return; } |
399 var offsetY = e.offsetY; |
401 var offset = computeOffset(e) |
|
402 var offsetX = offset.x; |
|
403 var offsetY = offset.y; |
|
404 console.log(zoomFactor) |
400 clickTimeout = setTimeout(clickHandler.bind(this, offsetX, offsetY), 190); |
405 clickTimeout = setTimeout(clickHandler.bind(this, offsetX, offsetY), 190); |
401 }); |
406 }); |
402 |
407 |
403 }; |
408 }; |
404 |
409 |
557 path += " Z"; |
562 path += " Z"; |
558 } |
563 } |
559 |
564 |
560 path += type; |
565 path += type; |
561 |
566 |
562 |
567 console.log(path) |
563 return path; |
568 return path; |
564 } |
569 } |
565 }; |
570 }; |
566 |
571 |
567 /* change to a component */ |
572 /* change to a component */ |
583 if (!cutCanvas.length) { |
588 if (!cutCanvas.length) { |
584 var cutCanvas = jQuery('<svg version="1.1"></svg>').addClass('cut-canvas'); |
589 var cutCanvas = jQuery('<svg version="1.1"></svg>').addClass('cut-canvas'); |
585 jQuery(config.wrapperId).append(cutCanvas); |
590 jQuery(config.wrapperId).append(cutCanvas); |
586 cutCanvas.append(mainImage); |
591 cutCanvas.append(mainImage); |
587 } |
592 } |
588 |
|
589 |
|
590 |
593 |
591 cutCanvas.css({ |
594 cutCanvas.css({ |
592 marginLeft: 'auto', |
595 marginLeft: 'auto', |
593 marginRight: 'auto', |
596 marginRight: 'auto', |
594 width: viewPort.width, |
597 width: viewPort.width, |