H5W3
当前位置:H5W3 > 其他技术问题 > 正文

vue中一个canvas组件如何做到让他自适应div

  我做了一个canvas组件,想让他自适应其对应的div,但是我修改了data之后没办法渲染出来,也没办法让canvas按照div的宽改变它的宽,请问这怎么解决:

canvas组件代码:

<template>
  <div>
    <canvas :id="id" :width="width" :height="height"></canvas>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    id: String,
    width: Number,
    height: Number,
    textContent: String,
    textColor: String,
    textSize: String
  },
  mounted() {
    this.renderTitle();
  },
  methods: {
    renderTitle() {
      let c = document.getElementById(this.id);
      let ctx = c.getContext("2d");

      let my_gradient = ctx.createLinearGradient(0, 0, this.width, 0);
      my_gradient.addColorStop(0, "#142640");
      my_gradient.addColorStop(0.5, "#1f395f");
      my_gradient.addColorStop(1, "#142640");
      ctx.fillStyle = my_gradient;
      ctx.fillRect(0, 0, this.width, this.height);

      ctx.font = this.textSize;
      ctx.fillStyle = this.textColor;
      ctx.textAlign = "center";
      ctx.fillText(this.textContent, this.width / 2, this.height / 2 + 6);
    }
  }
};
</script>

div的代码:

<template>
  <div class="RightTop" ref="RightTop" style="width: 100%;height: 280px;">
    <titleName
      id="RightTopTitle"
      :width="width"
      :height="height"
      :textContent="textContent"
      :textColor="textColor"
      :textSize="textSize"
    ></titleName>
  </div>
</template>

<script>
import titleName from "@/components/titleName.vue";

export default {
  name: "ASKs.vue",
  data() {
    return {
      width: 600,
      height: 48,
      textContent: "前后12小时运能分析",
      textColor: "#34ffff",
      textSize: "16px Georgia"
    };
  },
  components: { titleName },
  mounted() {
    this.kuangao();
  },

  methods: {
    kuangao(){
      this.width=800//能改,但是渲染不出来
      console.log(this.width)
    }
  }
}
</script>
<style scoped>
.RightTop {
  /*   width: 100%;
  height: 280px; */
  margin-bottom: 20px;
  border: 2px #336699 dotted;
}
</style>

应该怎么做才能让canvas不仅能渲染出来还能自适应div宽高呢?

回答:

canvas在使用的时候,好像是必须要设定确定的widthheight,不然没办法渲染。

如果是要适配,就要变量来控制宽高

canvas宽高变动后,都会清空画布,需要重新渲染

回答:

div里面的用弹性盒子试试

回答:

之前在微信小程序遇到过,canvas只能填写px,要做的就是把rem转px即可

回答:

  1. 缩放:宽realWidth = canvasWidth/divWidth > canvasHeight/divHeight ? canvasWidth canvasWidth/divWidth : canvas canvasHeight/divHeight. 高同。
  2. 居中:利用CSS3transform属性做translate转换。

回答:

canvas必须固定高度.你看看你的div是能拖动大小吗,还有会随窗口大小变换么 在变化的时候重新渲染canvas 就是清空画布再画一次 随窗口变就监听resize事件 有拖动变就拖动的时候重新渲染 ,如果很频繁就做个节流防抖啥的

回答:

不建议动态设置canvas宽高,动态设置宽高,之前的宽高和之后的宽高不一样的话绘制会发生变形

本文地址:H5W3 » vue中一个canvas组件如何做到让他自适应div

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址