Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- $(document).ready(function() {
- var $canvas = $('canvas');
- var rect = {};
- var drawing = false;
- var trigger = $('.rect');
- function _makeRect() {
- var startX = $('.coordinate_x').val();
- var startY = $('.coordinate_y').val();
- var width = $('.rect_width').val();
- var height = $('.rect_width').val();
- $canvas.drawRect({
- fillStyle: '#000',
- draggable: true,
- fromCenter: false,
- x: startX, y: startY,
- width: width, height: height
- });
- console.log(startX, startY, width, height);
- }
- $('.make_rect').on('click', _makeRect);
- $canvas.on('mousedown', _mousedown);
- $canvas.on('mouseup', _mouseup);
- $canvas.on('mousemove', _drawing);
- function _mousedown(e) {
- drawing = true;
- var startX = e.pageX - $canvas.offset().left;
- var startY = e.pageY - $canvas.offset().top;
- rect.x = startX;
- rect.y = startY;
- }
- function _mouseup(e) {
- drawing = false;
- }
- function _drawing(e) {
- var currentX = e.pageX - $canvas.offset().left;
- var currentY = e.pageY - $canvas.offset().top;
- if(drawing) {
- $canvas.drawRect({
- fillStyle: '#000',
- layer: true,
- name: 'box',
- fromCenter: false,
- x: rect.x, y: rect.y,
- width: currentX - rect.x, height: currentY - rect.y
- });
- }
- }
- });
Add Comment
Please, Sign In to add comment