0
私は角錐の仕事をするのが難しいです。画像ソースはロードされていますが、キャンバスの幅、高さはまだ0です。画像の適切な幅と高さをロードするために、ディスプレイを調整する必要があります(縦向き/横向きに回転し、ブラウザの幅を調整する) 。角張っていない幅と高さがありません
Hereは、アングルピントラのgithubソースです。
AngularJs(元画像の通過)
コントローラ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
-そしてここでは私のコードです10
<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>