Raphael使用g元素实现变形的操作

最新推荐文章于 2021-05-19 11:53:51 发布
最新推荐文章于 2021-05-19 11:53:51 发布
阅读量1.1k 收藏
点赞数
分类专栏： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baohanqing/article/details/17688569
版权
Raphael使用g元素实现变形的操作
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>svgdom实现g元素的变形操作</title>
    <style>
        #myg{
            border: 1px solid red;
            width: 200px;
            height: 200px;
        }
    </style>
    <script src="js/raphael.js"></script>
    <script>
        function createEleG(){
            var root=document.getElementByIdx_x("myg");
            var paper=Raphael(root,200,200);
            var st=paper.set();
            for(var i=0;i<3;i++){
                st.push(paper.rect(10+50*i,10+50*i,40,40,10));
            }
            //变形部分
            st.translate(50,10);
            st.rotate(45,50,50);
            st.scale(0.5);
            st.attr("fill","YellowGreen");
            st.attr("stroke","none");
        }
    </script>

</head>
<body οnlοad="createEleG()">
<h3>Raphael实现g元素的变形操作</h3>
<div id="myg"></div>
</body>
</html>
战略观察者
关注
专栏目录
raphael绘制可拖动、缩放、在线文字编辑、动态保存坐标的矩形
11-23
该例子里有3个demo 主要讲如何用raphael实现拖动矩形或其他元素 同时可以拖动矩形的右下角对矩形进行放大或缩小 其原理是在大矩形的右下角画一个小矩形 当拖动小矩形时改变大矩形的宽度和高度 同时对小矩形予以重新定位 其中第三个demo有详细的代码实现">该例子里有3个demo 主要讲如何用raphael实现拖动矩形或其他元素 同时可以拖动矩形的右下角对矩形进行放大或缩小 其原理是在大矩形的右下角画一个小矩形 当拖动小矩形时改变大矩形的宽度和高度 同时对小矩形予以重新 [更多]
Raphael使用g元素绘制多个矩形
12-30 910
<!DOCTYPE html>     <meta charset="utf-8">     svgdom实现g元素             #myg{             border: 1px solid red;             width: 200px;             height: 200px;         }         <script src="
用g.raphael.js高速绘制饼图、柱状图、点状图、折线图（下）
sinolzeng的专栏
12-10 6945
首先，这里有个g.raphael.js的范例文章，可以直接看，我就不转载了： http://www.cnblogs.com/lhb25/archive/2013/01/09/gRaphael-javascript-chart-library.html 好了，接下来我们来试试创建柱状图： 首先导入我们上一篇里面讲到的几个js，记得要按照上面从上到下的顺序导入，因为g.rap
用g.raphael.js高速绘制饼图、柱状图、点状图、折线图（上）
sinolzeng的专栏
12-10 3712
首先介绍一下什么是g.raphael。这个又要说到什么是raphael.js。raphael是一个javascript库，可以用来跨浏览器绘制各种图形，只要是你想得到的图形都可以用raphael绘制出来，而且raphael还可以实现各种常用和常见的动画效果，比如放大、移动、旋转等等。总之只要你想得到的效果，raphael基本上都可以实现。但是问题来了，挖掘机技术……啊呸，raphael本身绘制一些
Raphael.js最基本绘制示例代码
Jinx
06-23 3411
Raphael Play <!-- #canvas_container { width: 500px; border: 1px solid #aaa; } -->
RaphaelJS.group:Raphael JS SVG 组元素插件
06-22
其中：'r' 是 Raphael JS 画布，'container' 是 HTML 元素 ID，其中使用 Raphael JS 创建 SVG，'array' 是 Raphael JS 对象的数组可用方法 组删除 群译 group.rotate 群体规模 群推 group.getAttr 从组到前 group...
Raphael中文API动画与元素操作详解
在使用Raphael进行前端开发时，掌握这些API函数对于创建交互式的SVG图形和流畅的动画至关重要。通过结合延迟、重复和同步功能，开发者能够创建出动态且富有视觉吸引力的效果，提升用户体验。同时，熟悉如何设置和...
Raphaeljs 插件实现任意SVG节点加载
08-06
这篇博客文章“Raphaeljs 插件实现任意SVG节点加载”可能探讨了如何利用RaphaelJS来动态地加载和操作SVG元素。 RaphaelJS的核心功能包括创建形状（如圆、矩形、线条）、文本、图像以及复杂的路径。它提供了一个跨...
raphael-test:使用 RaphaelJS 显示的定义高度的随机树
06-23
RaphaelJS 是一个基于 SVG 和 VML 的 ...这将有助于理解如何用 JavaScript 和 RaphaelJS 实现复杂的图形操作。同时，这个项目也可以作为学习 SVG 和 JavaScript 图形编程的一个实例，帮助你提升这方面的能力。
最新的raphael.js文件
11-29
最新的raphael.js文件，因为官网不支持下载，需要拷贝并转码，所以偷懒下，做个文件放这边，有需要的尽管拿吧
Raphael多行文本输入
02-16
已有“raphael实现双击实现动态编辑文字”，源代码大家自己搜，大家自己下载，但是该代码中的文档编辑是单行的，这个是可以实现多行编辑的，比较方便，供大家参考。raphael.inline_text_editing.js直接替换即可。
web流程图动态绘制-使用raphael
09-30
web流程图动态绘制-使用raphael，具体过程和效果看博文 http://blog.csdn.net/evankaka/article/details/48439017
raphael中文帮助文档(API).chm
11-26
raphael中文帮助文档（API）chm文档，因为在网上没有找到好的离线版的，都是在线的，所以自己根据在线的生成了一个chm帮助文档，下载了，绝对不会让你失望。
raphael画既可拖动位移又可拖动放大缩小的大括号
11-23
用raphael画一个花括号（大括号），并且可以对其实现拖动，同时也可以拖动大括号中心实现括号的放大或缩小。
raphael.js中拖拽事件在笔记本上不可触发的问题
gdutRex的博客
11-27 350
问题描述 最近在改以前的项目代码，问题是通过raphael.js创建出来的svg元素拖动的事件在一些笔记本拖拽不了。 一开始还以为是浏览器版本的问题，所以更换浏览器发现还是不行。 并且不同笔记本还会出现不同的表现，有些笔记本可以，有些笔记本不可以。 问题追踪 在这个过程中，不管在哪个平台，页面都没有报错，代码都是正常运行的，这个就需要从raphael.js中找到答案。 结果发现项目中引用的是rapheal-min的压缩之后的代码，可读性不强。 所以就去找没有压缩过的代码去看。 源码阅读 一开始还以为源码很难
Raphael绘制流程图(一)，添加可拖动的图形
xdg2008的专栏
05-19 444
原项目使用的Raphael绘制流程图，要求能自定义箭头的样式和颜色，结合从网上找到的一些资料进行修改。 1.jquery或javascript代码 //添加步骤 function addStep(x, y, text, id, addToJSON, type1, bordercolor, bgcolor) { var guid = getGuid(); var xy = getNewXY(); x = x || xy.x; y = y || xy.y; ...
Raphaeljs入门到精通（一）
zhangyuanwei的专栏
08-25 1924
//创建一个画布 var paper = new Raphael("paper", 500, 500); //画圆 paper.circle(50, 50, 50); //画圆角方形 paper.rect(90, 90, 50, 50, 10); 这样一个简单的案例就完成了。 简要说明： new R
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值