Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- # add this js file /static/js/image_edit.js
- $(document).ready(function(){
- var width = window.innerWidth;
- var height = window.innerHeight;
- function update(activeAnchor) {
- var group = activeAnchor.getParent();
- var topLeft = group.get('.topLeft')[0];
- var topRight = group.get('.topRight')[0];
- var bottomRight = group.get('.bottomRight')[0];
- var bottomLeft = group.get('.bottomLeft')[0];
- var image = group.get('Image')[0];
- var anchorX = activeAnchor.getX();
- var anchorY = activeAnchor.getY();
- // update anchor positions
- switch (activeAnchor.getName()) {
- case 'topLeft':
- topRight.setY(anchorY);
- bottomLeft.setX(anchorX);
- break;
- case 'topRight':
- topLeft.setY(anchorY);
- bottomRight.setX(anchorX);
- break;
- case 'bottomRight':
- bottomLeft.setY(anchorY);
- topRight.setX(anchorX);
- break;
- case 'bottomLeft':
- bottomRight.setY(anchorY);
- topLeft.setX(anchorX);
- break;
- }
- image.position(topLeft.position());
- var width = topRight.getX() - topLeft.getX();
- var height = bottomLeft.getY() - topLeft.getY();
- if(width && height) {
- image.width(width);
- image.height(height);
- }
- }
- function addAnchor(group, x, y, name) {
- var stage = group.getStage();
- var layer = group.getLayer();
- var anchor = new Konva.Circle({
- x: x,
- y: y,
- stroke: '#666',
- fill: '#ddd',
- strokeWidth: 2,
- radius: 8,
- name: name,
- draggable: true,
- dragOnTop: false
- });
- anchor.on('dragmove', function() {
- update(this);
- layer.draw();
- });
- anchor.on('mousedown touchstart', function() {
- group.setDraggable(false);
- this.moveToTop();
- });
- anchor.on('dragend', function() {
- group.setDraggable(true);
- layer.draw();
- });
- // add hover styling
- anchor.on('mouseover', function() {
- var layer = this.getLayer();
- document.body.style.cursor = 'pointer';
- this.setStrokeWidth(4);
- layer.draw();
- });
- anchor.on('mouseout', function() {
- var layer = this.getLayer();
- document.body.style.cursor = 'default';
- this.setStrokeWidth(2);
- layer.draw();
- });
- group.add(anchor);
- }
- var stage = new Konva.Stage({
- container: 'container',
- width: width,
- height: height
- });
- var layer = new Konva.Layer();
- stage.add(layer);
- var imagesSrc = $('img.edit-image');
- imagesSrc.each(function(){
- var x = $(this).offset().top;
- var y = $(this).offset().left;
- var width = $(this).width()
- var height = $(this).height();
- console.log(x, y);
- // darth vader
- var konvaImg = new Konva.Image({
- width: width,
- height: height
- });
- var konvaImgGroup = new Konva.Group({
- x: x,
- y: y,
- draggable: true
- });
- layer.add(konvaImgGroup);
- konvaImgGroup.add(konvaImg);
- addAnchor(konvaImgGroup, x, x, 'topLeft');
- addAnchor(konvaImgGroup, width, x, 'topRight');
- addAnchor(konvaImgGroup, width, height, 'bottomRight');
- addAnchor(konvaImgGroup, x, height, 'bottomLeft');
- var imageObj = new Image();
- imageObj.onload = function() {
- konvaImg.image(imageObj);
- layer.draw();
- };
- imageObj.src = $(this).attr('src');
- });
- });
Add Comment
Please, Sign In to add comment