ZRender （Canvas）简单使用（拖拽、缩放、旋转、文字、层级）

最新推荐文章于 2024-05-08 20:31:28 发布
最新推荐文章于 2024-05-08 20:31:28 发布
阅读量2.3w 收藏 14
点赞数 7
文章标签： canvas zrender
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LynnhunAHa/article/details/86009709
版权

一、ZRender 是二维绘图引擎，它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是 ECharts 的渲染器；

二、下面是以图片做的简单demo，分为左中右三部分，左边是需要的图片，中间是绘图部分，右边是添加文字说明；

        <body>
		<div id="container">
			<div id="imgDiv" style="width:30%;border:1px solid red;min-height:600px;float:left;">
			<div style="float:left;">
				<img id="img1" class="imgs" src="a.jpg" style="height:50px;width:50px;" title="img1">
			</div>
			<div style="float:left;">
				<img id="img2" class="imgs" src="https://img.zcool.cn/community/01205956a1ca9b6ac7256cb04025c6.png@2o.png" style="height:50px;width:50px;" title="img2">
			</div>
			</div>
			<div id="canvasDiv" style="border:1px solid red;width:40%;float:left;">
				<canvas id="canvas"></canvas>
			</div>
			<div id="comment" style="border:1px solid red;min-height:600px;width:9%;float:left;">
				<button id="btn">添加说明</button>
			</div>
			<div id="text" style="width:254px;height: 50px;position: absolute;left:0;top:0;right:0;bottom: 0;margin: auto;display: none;">
				<input type="text" id="input" style="width:250px;">
				<button id="yes" style="float:left;">确定</button>
				<button id="no" style="float:right;">取消</button>
			</div>
		</div>
	</body>

三、点击左侧某一图片，该图片会默认显示到中部画布的左上角，鼠标左键在图片上按下可拖动图片，当画布上有多张图片时，         点击的图片一直在最上层（代码片段不完整，直接使用效果不佳，最后会有完整代码）；

//点击左侧图片默认在右侧框左上角显示该图片
	$("#imgDiv div img").click(function(){
		src=this.src;
		width=this.width;
		height=this.height;
		//绘画图片
		var img = new zrender.Image({
            style: {
				image:src,
                x: 0,
                y: 0,
                width: width,
				height:height
            },
			zlevel:temp,
			id:idCount,
            draggable: true
        }).on('mousedown', function () {
			this.attr('zlevel',++temp);
		}).on('mousewheel',function(ev){
			var e = (ev||event).wheelDelta/20;
			//设置缩放大小
			this.attr('scale',[this.scale[0]+= e,this.scale[1]+= e]);
			//设置缩放中心
			this.attr('origin',[this.style.x+this.style.width/2,this.style.y+this.style.height/2]);
		}).on('dblclick',function(ev){
			//设置旋转角度
			this.attr('rotation',[this.rotation-Math.PI/12]);
			//设置旋转中心
			this.attr('origin',[this.style.x+this.style.width/2,this.style.y+this.style.height/2]);
		});
        group.add(img);
		idCount++;
	});

四、鼠标点击选择画布上某一图片，然后滚动鼠标滚轮可缩放图片，设置缩放中心为图片中心；

五、双击图片可使图片旋转，设置旋转中心为图片中心；

六、点击右侧添加说明，弹出输入框，输入文字说明，设置文字说明不能为空且不能超过32个字符，点击确定后，说明将显示在         画布上，可拖动放置在目标位置（代码片段不完整，直接使用效果不佳，最后会有完整代码）；

//添加说明输入框
	$("#btn").click(function () {
		$("#text").show();
		$("#input").val("");
		$("#text").attr("z-index",temp+99);
    });
	//输入说明后点击确认
	$("#yes").click(function () {
		var input = $("#input").val();
		if(input==undefined||input.trim()==""){
			alert("输入为空！");
			return;
		}
		if(input.length>32){
			alert("最多支持32个字符！");
			return;
		}
		if(input.length>16){
			input=input.substring(0,16)+'\n'+input.substring(16,input.length+1);
		}
		//输入说明符合要求后 创建Text 将说明赋值Text
		var text = new zrender.Text({
			style:{
				x: 200,
				y: 200,
				text:input
			},
			id:100,
			draggable: true
		}).on('mousedown', function () {
			this.attr('zlevel',++temp);
		});
      group.add(text);
      $("#text").hide();
    })
	//点击取消
	$("#no").click(function(){
		$("#text").hide();
	});

七、完整代码。

<!doctype html>
<script type="text/javascript" src="C:/Users/Sheado/Desktop/zrender.js"></script>
<script type="text/javascript" src="D:/workSpace/zhzf3.1/cats-case-web-zhzf/src/main/webapp/scripts/easyui/jquery.min.js"></script>
<html>
	<head> 
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
		<title> 
			canvas5
		</title>  
	</head> 
	<body>
		<div id="container">
			<div id="imgDiv" style="width:30%;border:1px solid red;min-height:600px;float:left;">
			<div style="float:left;">
				<img id="img1" class="imgs" src="a.jpg" style="height:50px;width:50px;" title="img1">
			</div>
			<div style="float:left;">
				<img id="img2" class="imgs" src="https://img.zcool.cn/community/01205956a1ca9b6ac7256cb04025c6.png@2o.png" style="height:50px;width:50px;" title="img2">
			</div>
			</div>
			<div id="canvasDiv" style="border:1px solid red;width:40%;float:left;">
				<canvas id="canvas"></canvas>
			</div>
			<div id="comment" style="border:1px solid red;min-height:600px;width:9%;float:left;">
				<button id="btn">添加说明</button>
			</div>
			<div id="text" style="width:254px;height: 50px;position: absolute;left:0;top:0;right:0;bottom: 0;margin: auto;display: none;">
				<input type="text" id="input" style="width:250px;">
				<button id="yes" style="float:left;">确定</button>
				<button id="no" style="float:right;">取消</button>
			</div>
		</div>
	</body>
</html>
<script>
window.onload = function() {
    var container = document.getElementById('canvas');
	//用canvas属性设置宽高，如果在样式设置宽高，图片会变形
	container.width=document.body.clientWidth*0.4;
	container.height=document.documentElement.clientHeight*0.75;
    var zr = zrender.init(container);
    var width;
    var height;
	var src;
    var temp = -99999;
	var idCount=1;
	var group = new zrender.Group();
	//添加说明输入框
	$("#btn").click(function () {
		$("#text").show();
		$("#input").val("");
		$("#text").attr("z-index",temp+99);
    });
	//输入说明后点击确认
	$("#yes").click(function () {
		var input = $("#input").val();
		if(input==undefined||input.trim()==""){
			alert("输入为空！");
			return;
		}
		if(input.length>32){
			alert("最多支持32个字符！");
			return;
		}
		if(input.length>16){
			input=input.substring(0,16)+'\n'+input.substring(16,input.length+1);
		}
		//输入说明符合要求后 创建Text 将说明赋值Text
		var text = new zrender.Text({
			style:{
				x: 200,
				y: 200,
				text:input
			},
			id:100,
			draggable: true
		}).on('mousedown', function () {
			this.attr('zlevel',++temp);
		});
      group.add(text);
      $("#text").hide();
    })
	//点击取消
	$("#no").click(function(){
		$("#text").hide();
	});
	//点击左侧图片默认在右侧框左上角显示该图片
	$("#imgDiv div img").click(function(){
		src=this.src;
		width=this.width;
		height=this.height;
		//绘画图片
		var img = new zrender.Image({
            style: {
				image:src,
                x: 0,
                y: 0,
                width: width,
				height:height
            },
			zlevel:temp,
			id:idCount,
            draggable: true
        }).on('mousedown', function () {
			this.attr('zlevel',++temp);
		}).on('mousewheel',function(ev){
			var e = (ev||event).wheelDelta/20;
			//设置缩放大小
			this.attr('scale',[this.scale[0]+= e,this.scale[1]+= e]);
			//设置缩放中心
			this.attr('origin',[this.style.x+this.style.width/2,this.style.y+this.style.height/2]);
		}).on('dblclick',function(ev){
			//设置旋转角度
			this.attr('rotation',[this.rotation-Math.PI/12]);
			//设置旋转中心
			this.attr('origin',[this.style.x+this.style.width/2,this.style.y+this.style.height/2]);
		});
        group.add(img);
		idCount++;
	});
    zr.add(group);
}

</script>

 

李时珍的皮的珍时李
关注
  • 7
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
data-visualization-sample:使用 ZRender 制作的示例图表
06-27
数据可视化测试 用。 预习
企业架构图(js+canvas).rar
03-15
2. 层级缩放和滚动：允许用户放大缩小以查看细节，或者滚动查看大面积的架构图。 3. 动态加载和更新：根据需要动态加载更多数据，或者在数据变化时实时更新图表。 4. 用户交互：可能包括点击节点查看详情、拖动节点...
关于百度zrender文字无法居中的问题处理
qq_41116743的博客
04-27 1058
无意中找到了百度zrender。 不知道是不是故意为之，demo非常少，网上能查到的使用的例子也很少。 做文字框的时候，文字始终无法居中对齐。 后来发现，当设置textAlign: 'center', 时，仅仅是开始位置变为了中间，并不是文字居中。 那么，需要减掉文字的一半长度，作为起始点。x: 200 - name.length *,3, //x,y代表坐标 英文或数据，系数用3，中文用6。 整段代码如下: var zr = zrender.init(document.getElementBy..
Canvas绘画之文本缩放并旋转
最新发布
weixin_54048131的博客
05-08 325
【代码】Canvas绘画之文本缩放并旋转。
【ZRender 渲染引擎 - 壹】 | 基础图形元素绘制
张风捷特烈的博客
10-21 727
theme: cyanosis 持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第 7 天，点击查看活动详情 开篇前言 在掘金认识我的都知道，我主要是研究 Flutter 的。其实我一直希望开发出一套好用的 Flutter 的图表库，但是期间遇到了一些瓶颈。当我偶然知道 echarts 底层是由 ZRender 引擎渲染时，内心是非常激动的。无论是简单的统计图，...
ZRender使用中关于图片裁剪、拖拽问题
qq_41604498的博客
08-29 1986
最近做项目使用到了ZRender ZRender 是二维绘图引擎，它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是 ECharts 的渲染器，绘图的时候特别方便。 如果想在画布中绘制图片，使用new zrender.Image 假如图片路径会存放在一个数组里面，然后通过for循环，绘制图片，那么图片都在同一个位置，最后绘制的会覆盖住之前的。所以设置draggable属性为...
zrender的text组件设置文字居中或中心位于指定位置
qq_30873869的博客
01-22 481
zrender设置文字居中
Zrender 绘制树图，并且生成png下载
xhwy_zh的博客
06-24 1168
开发环境：VUE 数据结构： data: {value: 'xx', child: [{value: 'xx'}]} 实现代码
Unity3d C#实现UGUI的界面可拖拽移动和选中置顶工程源码
08-03
在进行位置更新时，需要考虑Canvas的Scale和Pixel Perfect设置，以确保在不同分辨率和缩放比例下界面元素仍然能够正确显示。 此外，项目中的"DragUIItem"很可能是一个脚本，它包含了实现拖拽和置顶功能的主要逻辑。...
微信小程序-图片放缩、旋转、裁剪 for 微信小程序
08-06
--然而小程序里canvas组件是由客户端创建的原生组件，它的层级是最高的。遮罩会被盖住。 2）两个canvas层叠。--在开发工具上好好的，到手机上就不行了。。 另外，由于touchMove绑定的函数里有canvas作图，会对手机...
ECharts董事会体系层级特效
04-25
4. 配置ECharts选项：设置树图的布局、节点样式、连接线样式、缩放拖拽等特性。 5. 加载数据：将组织结构数据传入ECharts的`series`配置项，指定为树图类型并提供数据。 6. 渲染图表：调用ECharts实例的`setOption`...
zrender 教程帮助
06-10
zrender 来自官网的教程帮助： MVC核心封装实现图形仓库、视图渲染和交互控制： Stroage(M) : shape数据CURD管理 Painter(V) : canvas元素生命周期管理，视图渲染，绘画，更新控制 Handler(C) : 事件交互处理，实现完整dom事件模拟封装 shape : 图形实体，分而治之的图形策略，可定义扩展 tool : 绘画扩展相关实用方法，工具及脚手架 animation : 动画扩展，提供promise式的动画接口和常用缓动函数
zrender开发的前端接水果的小游戏
01-11
使用轻量级的 Canvas 类库 ZRender开发。小游戏内容用篮子接水果，接到苹果10分，橘子5分，菠萝15分，草莓30分。
tt-demo:使用 Fabric.js 进行交易部落的演示
06-08
这些对象具有属性（如颜色、大小、位置）和方法（如移动、旋转、缩放），可以方便地进行操作和管理。 3. **Object Selection**：Fabric.js 自带了对象选择功能，用户可以通过拖动一个可调整大小的框来选择多个对象...
Echarts 源码解读 一：zrender源码分析1var zr = zrender.init(document.getElementById(‘main‘))；
Lingfur的博客
10-09 1304
2021SC@SDUSC 因为Echarts是基于zrender进行实现的，所以解读echarts源码前，首先要对zrender有基本的了解。 zrender是canvas的一个类库，zrender是基于canvas实现的。 目录 zrender的src文件夹 文件夹： animation动画相关 contain包含判断 core核心代码，包含一些工具（util.js）、事件（event.js）、唯一ID（guid.js)、矩阵运算有关(matrix.js）等 dom...
微信小程序Canvas增强组件—WeZRender
大灰狼的小绵羊哥哥的博客
01-07 4285
WeZRender是一个微信小程序Canvas增强组件，基于HTML5 Canvas类库ZRender。 使用 WXML： canvas style="width: 375px; height: 600px;" canvas-id="line-canvas-1">canvas> JS： var wezrender = require('../../
vue项目canvas绘制文字支持缩放旋转拖拽
01-28
Vue项目中，我们可以利用Canvas API来实现文字的绘制，同时支持文字的缩放、旋转和拖拽操作。首先，我们需要在Vue项目中引入Canvas元素，并在对应的组件中进行相关操作。 在绘制文字时，我们可以使用Canvas的fillText()方法来绘制文字，并通过设置字体、颜色、大小等属性来自定义文字的样式。同时，我们可以利用Canvas的transform()方法来实现文字的缩放和旋转操作。通过修改Canvas的transformation matrix，我们可以实现文字的缩放和旋转，从而达到我们想要的效果。 另外，我们还可以通过监听鼠标事件和触摸事件来实现文字的拖拽操作。通过获取用户的鼠标或触摸事件，并结合Canvas中的坐标转换方法，我们可以实现文字的拖拽操作，让用户可以自由地移动文字的位置。 总的来说，在Vue项目中实现Canvas绘制文字并支持缩放、旋转和拖拽，可以通过Canvas API提供的绘制方法和变换方法来实现。通过合理的事件监听和坐标转换，我们可以实现用户交互操作，让用户可以方便地对文字进行操作，从而提升用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值