konva系列教程4：图形属性_konva node旋转中心点_前端西瓜哥的博客

填充（fill）

用法： fill: #f04
修改图形颜色：
rect.fill('green');
fill 方法不仅可以设置颜色，还可以获取颜色，只要不传入参数即可： 
const fill = rect.fill();
当然我们还可以使用高级的填充图片、渐变色的功能，需要用到 fillPatternImage 、fillLinearGradientStartPoint 、fillLinearGradientEndPoint 、fillLinearGradientColorStops 等方法，内容有点多，这里就不展开讲了。 
描边（stroke）
 
描边相关的样式很多，这里只介绍最常用的 stroke 和 strokeWidth。 
用法：stroke: '#000' strokeWidth: 4 
修改图形的描边颜色、线宽： 
rect.stroke('blue').strokeWidth(8);
konva 支持链式写法。 
 链式写法，其实就是一个对象，执行了方法后，又返回了这个对象。 
 这样的话我们就可以将多个方法的调用链接起来，提高代码可读性，常见于修改对象属性值。 
获取描边颜色、线宽 
const stroke = rect.stroke();
const strokeWidth = rect.strokeWidth();
不透明度（opacity）
 
用法：opcity: 0.5 
设置透明度： 
rect.opcity(0.3)
获取不透明度的值： 
const opcity = rect.opcity();
显示/隐藏（visible）
 
用法：visible: true 
显示图形： 
rect.show();
// 或者
rect.visible(true);
隐藏图形： 
rect.hide();
rect.visible(false);
本质其实是修改图形的 visible 属性，然后重新渲染。show 和 hide 只是语义化的封装。 
我们不能像操作 DOM 元素一样，直接给图形元素设置 cursor 属性。 
但我们可以在光标移动到图形上的时候，动态改变 canvas 挂载的 DOM 元素的 cursor 属性。 
rect.addEventListener('mouseenter', () => {
  stage.container().style.cursor = 'move'
rect.addEventListener('mouseleave', () => {
  stage.container().style.cursor = ''
不同形状有各自的属性，具体可以看 konva 的文档： 
https://konvajs.org/api/Konva.html
                    大家好，我是前端西瓜哥，我们今天来看看图形的一些常见属性。x 和 y 代表的是图形的 位置，对于矩形来说，是左上角。对于圆形、圆环这些来说，则是在圆心处。这个位置也是图形进行变形的参考点，或者说是旋转时的中心。offsetX 和 offsetY 可以改变图形的位置。offset 其实是将画布坐标系的原点移动一定距离，再绘制图形。比如对矩形，我们将 offsetX 和 offsetY 设置为 width/2 和 height/2，我们就能让矩形的位置跑到矩形的中点。width 和 height 为图形的宽高
 Vue Konva是一个JavaScript库，用于使用Vue绘制复杂的画布图形。
 它提供了声明性和React性绑定。
 所有vue-konva组件都对应于具有前缀“ v-”的同名Konva组件。 可用于Konva对象的所有参数都可以在config中作为对应的vue-konva组件的config添加。
 核心形状包括： v-rect ， v-circle ， v-ellipse ， v-line ， v-image ， v-text ， v-text-path ， v-star ， v-label ， v-path ， v-regular-polygon 。 您
Konva is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
Konva enables high performance animations, transitions, node nesting, layering, fil
1. clearRect造成闪烁
使用clearRect清空局部区域后重绘能会造成闪烁。PC上问题不大，移动端比较明显。（注clearRect(0,0,canvas.width,canvas.height)也会闪烁，除非是clearRect(0,0,canvas.width+1,canvas.height+1)）。
可能是canvas抗锯齿的动作导致。关于该问题的分析见：https://stackoverflow.com/que
				KonvaJS入门 1 安装与引用一、简介二、Vue2下安装与引用1. npm 安装2. 引用3. 使用三、基本图形1. 常用属性3.1.1 config 配置属性2. 文本3. 正方形4. 圆5. 线段下面是画三角形，每个边带0.2弧度。连接与端子形状虚线6. 椭圆7. 楔形
KonvaJS 是一个功能强大的Html5 Canvas库。
文档：https://konvajs.org/docs/vue/index.html
二、Vue2下安装与引用
1. npm 安装
npm install 
				基于konvajs进行实现，一个强大的canvas库，进行了组件化，支持原生js、react、vue.
https://konvajs.org/docs/react/Custom_Shape.html
先上效果图：
在canvas画布中，我们往往需要获取到某个点的像素颜色，例如我们常见的调色板。今天以官网上提供的方格调色板为例，在此基础上稍微做一下扩展，讲解一下如何根据鼠标的位置获取某个点的RGB值。
可以点击某个方格，然后在下面的小方格中会显示对应的颜色
1、这个例子中有两个canvas，大的canvas展示调色板，小的canvas展示用户选取的颜色。
2、大的canvas通过两个for循环、fillStyle和fillRect在小矩形框中渲染颜色
3、通过鼠标的mousedown事件，获取
				该系列的入门教程教您如何使用Konva绘制第一个形状。 它还说明了层和组在Konva中如何工作。 在本系列的其余部分中，我们将专注于更具体的主题，例如创建基本和复杂的形状或将事件侦听器附加到不同的形状，以使图形具有交互性。 
 本教程将向您展示如何在Konva中创建基本形状，例如矩形，圆形和椭圆形。 您还将了解可用于根据需要自定义所有这些形状的外观的不同属性。 本教程后面的部分将讨论如何使用K...
				在本系列的第二篇教程中，您学习了如何使用Konva绘制一些基本形状，例如矩形，圆形和正多边形。 第三个教程介绍了如何使用Konva在画布上绘制一些更复杂的形状，例如星形和环形以及精灵。 
 在本教程中，我们将更进一步，学习如何通过更改形状的填充和笔触值将不同的样式应用于形状。 您还将学习如何控制形状的不透明度并对其应用阴影。 在最后几节中，您将学习如何使用混合模式来指定不同形状重叠时最终结果的...