angular-pintura 不加载宽度和高度答案

【问题标题】：angular-pintura not loading width and heightangular-pintura 不加载宽度和高度
【发布时间】：2016-09-15 19:39:08
【问题描述】：

我在制作 angular-pintura 时遇到了困难。图像源已加载，但画布的宽度、高度仍为 0。我需要调整显示（旋转到纵向/横向，调整浏览器的宽度）以使其加载图像的正确宽度和高度.

Here 是 angular-pintura 的 github 源。

这是我的代码 -

AngularJs（源图像的传递）

vm.modalInstance = $modal.open({
    templateUrl: '/app/directives/app-viewer/image-viewer/image-viewer.html',
    controller: 'ImageViewerController',
    controllerAs: 'vm',
    resolve: {
        params: function () {
            return {
                src: '/assets/img/bg-1.jpg'
            }
        }
    }
});

控制器 ImageViewer

function imageViewerController($modalInstance, params, $scope) {
    var vm = this;

    vm.image = {
        src: params.src,
        position: {
            x: -137.5,
            y: -68
        },
        scaling: 2,
        maxScaling: 5,
        scaleStep: 0.11,
        mwScaleStep: 0.09,
        moveStep: 99,
        fitOnload: true,
        progress: 0
    }
}

HTML

<ng-pintura ngp-src="vm.image.src" ngp-scaling="vm.image.scaling" ngp-position="vm.image.position" 
    ngp-max-scaling="vm.image.maxScaling" ngp-scale-step="vm.image.scaleStep" ngp-move-step="vm.image.moveStep" ngp-mw-scale-step="vm.image.mwScaleStep" ngp-fit-onload="vm.image.fitOnload" ngp-progress="vm.image.progress">
    <div id="zoomslider">
        <input ng-model="slider.value" ng-change="sliderChange()" orient="vertical" type="range" min="0" max="100" step="1" ng-disabled="scalingDisabled">
    </div>
    <button id="zoomin" ng-click="zoomIn()" ng-disabled="scalingDisabled" class="btn btn-default hidden-xs"><span class="glyphicon glyphicon-plus"></span></button>
    <button id="zoomout" ng-click="zoomOut()" ng-disabled="scalingDisabled" class="btn btn-default hidden-xs"><span class="glyphicon glyphicon-minus"></span></button>
    <button id="moveup" ng-click="moveUp()" class="btn btn-default hidden-xs"><span class="glyphicon glyphicon-chevron-up"></span></button>
    <button id="movedown" ng-click="moveDown()" class="btn btn-default hidden-xs"><span class="glyphicon glyphicon-chevron-down"></span></button>
    <button id="moveleft" ng-click="moveLeft()" class="btn btn-default hidden-xs"><span class="glyphicon glyphicon-chevron-left"></span></button>
    <button id="moveright" ng-click="moveRight()" class="btn btn-default hidden-xs"><span class="glyphicon glyphicon-chevron-right"></span></button>
    <button id="movecenter" ng-click="fitInView()" class="btn btn-default"><span class="glyphicon glyphicon-screenshot"></span></button>
</ng-pintura>

【问题讨论】：

标签： javascript angularjs html canvas konvajs

【解决方案1】：

必须在样式表中明确设置width 和height。

ng-pintura {
    position: relative;
    display: block;
    width: 100%;
    height: 600px;
    background: black;
}

我从 angular-pinturas github 页面获取 css 代码。

【讨论】：