KonvaJS-使用Bootstrap Modals做出響應

Question

以下是KonvaJS項目，您可以在其中向圖像添加貼紙。 但是，它具有固定的寬度和固定的高度。

現在，由於大小是固定的，因此它無法響應任何響應，例如引導程序模態。

這是我遵循KonvaJS響應指南的嘗試， 請參見此處。 還有這里的指南。

在嘗試上傳圖像后，我的代碼無法獲得模態的新寬度，因為它返回0，因此無法針對畫布的大小進行計算。

如何使畫布響應？

 function centreRectShape(shape) { shape.x((stage.getWidth() - shape.getWidth()) / 2); shape.y((stage.getHeight() - shape.getHeight()) / 2); } var stage = new Konva.Stage({ container: 'canvas-container', width: 650, height: 300 }); var layer = new Konva.Layer(); stage.add(layer); var bgRect = new Konva.Rect({ width: stage.getWidth(), height: stage.getHeight(), fill: 'gold', opacity: 0.1 }); layer.add(bgRect); var uploadedImage = new Konva.Image({ draggable: false }); layer.add(uploadedImage); // make an object to keep things tidy - not strictly needed, just being tidy function addSticker(imgUrl){ // make the sticker image object var stickerObj = new Konva.Image({ x: 240, y: 20, width: 93, height: 104, name: 'sticker', draggable: true }); layer.add(stickerObj); // make the sticker image loader html element var stickerImage = new Image(); stickerImage.onload = function() { stickerObj.image(stickerImage); layer.draw(); }; stickerObj.on('transformstart', function(){ undoBefore = makeUndo(this); }) stickerObj.on('transformend', function(){ var undoAfter = makeUndo(this); addUndo(123, undoBefore, undoAfter) }) // assigning the URL of the image starts the onload stickerImage.src = imgUrl; } imgObj = new Image(); imgObj.onload = function() { uploadedImage.image(imgObj); var padding = 20; var w = imgObj.width; var h = imgObj.height; var targetW = stage.getWidth() - (2 * padding); var targetH = stage.getHeight() - (2 * padding); var widthFit = targetW / w; var heightFit = targetH / h; var scale = (widthFit > heightFit) ? heightFit : widthFit; w = parseInt(w * scale, 10); h = parseInt(h * scale, 10); uploadedImage.size({ width: w, height: h }); centreRectShape(uploadedImage); layer.draw(); } imgObj.src = 'https://images.pexels.com/photos/787961/pexels-photo-787961.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'; $('.sticker').on('click', function() { var theSticker = addSticker($(this).attr('src')); toggle(true); toggle(false); }); var vis = false; $('#toggler').on('click', function(){ toggle(vis); }) function undoData(opts){ this.x = opts.x; this.y = opts.y; this.width = opts.w; this.height = opts.h; this.rotation = opts.r; } var undoBefore; function makeUndo(shape){ return new undoData({x:shape.getX(), y: shape.getY(), w: shape.getWidth(), h: shape.getHeight(), r: shape.getRotation() }) } var undoList = []; function addUndo(shapeId, before, after){ undoList.push({id: shapeId, before: before, after: after}); console.log(undoList[undoList.length - 1]) } function toggle(isVisible){ if (!isVisible){ var shapes = stage.find('.sticker'); shapes.each(function(shape) { var imgRotator = new Konva.Transformer({ node: shape, name: 'stickerTransformer', keepRatio: true, enabledAnchors: ['top-left', 'top-right', 'bottom-left', 'bottom-right'] }); layer.add(imgRotator); }) vis = true; } else { var shapes = stage.find('.stickerTransformer'); shapes.each(function(shape) { shape.remove(); }) vis=false; } layer.draw(); $('#toggler').html((vis ? 'Toggle Off' : 'Toggle On')); } 

 html, * { margin: 0; padding: 0; } body { background: #eee; } #image-editor { background: #fff; border-radius: 3px; border: 1px solid #d8d8d8; width: 650px; margin: 0 auto; margin-top: 20px; box-shadow: 0 3px 5px rgba(0, 0, 0, .2); } .stickers { padding: 10px 5px; background: #eee; } .stickers>img { margin-right: 10px; } 

  <div id="image-editor"> <div id="canvas-container"></div> <div class="stickers"> <img class="sticker" src="https://craftblock.me/koa/fb-upload-clone/stickers/sticker%20(1).png" alt="Sticker" width="62px"> </div> </div> <script src="https://unpkg.com/konva@2.4.1/konva.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

因此，讓我嘗試進一步解釋該問題： 看看我使它響應的嘗試的實時版本。

如您所見，在嘗試將圖像加載到畫布中之后，彈出了模態，但是畫布無法調整大小。

這是JS：

    /**
 * Image Editor
 */

var stageWidth = 1000;
var stageHeight = 1000;

var stage = new Konva.Stage({
    container: 'canvas-container',
    width: stageWidth,
    height: stageHeight
});

var layer = new Konva.Layer();
stage.add(layer);

var bgRect = new Konva.Rect({
    width: stage.getWidth(),
    height: stage.getHeight(),
    fill: 'gold',
    opacity: 0.1
});
layer.add(bgRect);

var uploadedImage = new Konva.Image({
    draggable: false
});

layer.add(uploadedImage);

imgObj.onload = function () {

    uploadedImage.image(imgObj);

    var padding = 20;
    var w = imgObj.width;
    var h = imgObj.height;

    var targetW = stage.getWidth() - (2 * padding);
    var targetH = stage.getHeight() - (2 * padding);

    var widthFit = targetW / w;
    var heightFit = targetH / h;
    var scale = (widthFit > heightFit) ? heightFit : widthFit;

    w = parseInt(w * scale, 10);
    h = parseInt(h * scale, 10);

    uploadedImage.size({
        width: w,
        height: h
    });
    centreRectShape(uploadedImage);
    layer.draw();
}

$('.sticker').on('click', function () {
    addSticker($(this).attr('src'));
});

fitStageIntoParentContainer();
window.addEventListener('resize', fitStageIntoParentContainer);

function centreRectShape(shape) {
    shape.x((stage.getWidth() - shape.getWidth()) / 2);
    shape.y((stage.getHeight() - shape.getHeight()) / 2);
}

function addSticker(imgUrl) {
    var stickerObj = new Konva.Image({
        x: 240,
        y: 20,
        width: 93,
        height: 104,
        draggable: true
    });
    var stickerImage = new Image();
    stickerImage.onload = function () {
        stickerObj.image(stickerImage);
        centreRectShape(stickerObj);
        layer.draw();
    };
    stickerImage.src = imgUrl;
    layer.add(stickerObj);
    addModifiers(stickerObj);
}

function addModifiers(obj) {
    var imgRotator = new Konva.Transformer({
        node: obj,
        keepRatio: true,
        enabledAnchors: ['top-left', 'top-right', 'bottom-left', 'bottom-right']
    });
    layer.add(imgRotator);
}

function fitStageIntoParentContainer() {
    var container = document.querySelector("edit-image-modal");

    // now we need to fit stage into parent
    var containerWidth = container.offsetWidth;
    // to do this we need to scale the stage
    var scale = containerWidth / stageWidth;


    stage.width(stageWidth * scale);
    stage.height(stageHeight * scale);
    stage.scale({
        x: scale,
        y: scale
    });
    stage.draw();
}

Answer 1

您用來偵聽頁面上“調整大小”的技術將適用於主窗口，但不適用於模式。 您可以通過一些簡單的console.log（）輸出來確認。

您需要使用bootstrap事件on（'show.bs.modal'）捕獲顯示模態的時間，即您確實要觸發對fitStageIntoParentContainer（）的調用時；

有關信息，請參見此SO帖子 。 它不是重復項，而是涵蓋了引導程序模式事件。

萬一這個問題被消除，您應該朝着類似的方向前進：

$('your_modal_element_selector').on('show.bs.modal', function () {
       fitStageIntoParentContainer();
});