正常情况下,获取父级div的宽高赋值给子元素的宽高是可以盛放下的。
但在在我的代码中会出现滚动条的问题
html结构:
<div class="imgcentercon" ref="canvasBox" @mousemove="move($event)">
<canvas id="canvasone" ref="drawRectobject" class="canvasone" width="0" height="0" @mousedown="down($event)" @mouseup="up($event)" @mousemove="_mousemove($event)"></canvas>
<canvas id="canvasXY" ref='canvasXY' width="0" height="0"></canvas>
<canvas id="canvastwo" ref="imgCanvas" class="canvasone" width="0" height="0" ></canvas>
<img id="tulip" :src="imgurl" />
</div>
JS结构:
var cans = this.$refs.imgCanvas;
var canvas = this.$refs.drawRectobject;
var canvasXY = this.$refs.canvasXY;
var parentBox = this.$refs.canvasBox
var ctx = cans.getContext("2d");
var img = document.getElementById("tulip");
console.log(parentBox.clientWidth, parentBox.clientHeight)
img.onload = function() {
if(img.width >= parentBox.clientWidth){
cans.width = canvasXY.width = canvas.width = this.imgWidth = parentBox.offsetWidth-5
}
if(img.height >= parentBox.clientHeight){
cans.height = canvasXY.height = canvas.height = this.imgHeight = parentBox.offsetHeight-5
}
ctx.drawImage(img, 0, 0, cans.width, cans.height/2);
}
之前的css(只跳了重要的)
.imgcentercon {
width: 72%;
height:100%;
overflow: scroll;// 此句关键
float: left;
background: #ecedee;
position: relative;
}
之后的css
.imgcentercon::-webkit-scrollbar-track{ /*设置滚动条轨迹 border-radius等*/
display: none;
}
.imgcentercon::-webkit-scrollbar{ /*滚动条整体样式,可设置width, height*/
display: none;
}
.imgcentercon::-webkit-scrollbar-thumb{ /*设置滚动条内小方块 background-color*/
display: none;
}
其中的伪类::-webkit-scrollbar-track
、::-webkit-scrollbar
、::-webkit-scrollbar-thumb
可以消除滚动条。另外可以根据需求完成设置滚动条样式
IE里面设置滚动条样式
body{
scrollbar-face-color: #1f7ebe; /*滚动条凸出部分的颜色*/
scrollbar-highlight-color: #1f7ebe; /*滚动条空白部分的颜色*/
scrollbar-shadow-color: #1f7ebe; /*立体滚动条阴影的颜色*/
scrollbar-3dlight-color: #1f7ebe; /*滚动条亮边的([www.111cn.net](http://www.111cn.net/))颜色*/
scrollbar-arrow-color: #1f7ebe; /*上下按钮上三角箭头的颜色*/
scrollbar-track-color: #c1e2f1; /*滚动条的背景颜色*/
scrollbar-darkshadow-color: #1f7ebe; /*滚动条强阴影的颜色*/
scrollbar-base-color: #1f7ebe; /*滚动条的基本颜色*/
}
网友评论